JavaScript 的使用基础总结②DOM

undeceive 2024-10-19 12:03:59 原文

HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

获取节点

getElementById:通过id取到的唯一节点。
getElementsByName() ：通过name属性
getElementsByTagName() ：通过标签名
getElementsByClassName() ：通过class名

后面三个getElements取到的是数组格式，不能直接添加各种属性，而应该取出数组的每一个单独动作。
例如：getElementsByName（“Name1”）[0].onclick=function

1.在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

例

                  <!DOCTYPE html>

                  <html>

                  <body>

                  <script>

                  document.write(Date());

                  </script>

                  </body>

                  </html>

2.如需改变 HTML 元素的内容使用document.getElementById(id).innerHTML=new HTM

            <html>

            <body>

            <p id="p1">Hello World!</p>

            <script>

            document.getElementById("p1").innerHTML="New text!";

            </script>

            </body>

            </html>

3.改变 HTML 元素的属性使用document.getElementById(id).attribute=new value

          <!DOCTYPE html>

         html>

         <body>

         <img id="image" src="smiley.gif">

         <script>

         document.getElementById("image").src="landscape.jpg";

         </script>

         </body>

         </html>

4. HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

                     document.getElementById(id).style.property=new style

1、查看属性节点，getAttribute("属性名")；
2、设置属性节点：setAttribute（"属性名"，"新属性值"）

DOM事件：


 onclick 点击

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onchange 事件常结合对输入字段的验证来使用

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

点击鼠标按钮时，会触发 onmousedown 事件

当释放鼠标按钮时，会触发 onmouseup 事件

onfocus获得焦点时

JavaScript 的使用基础总结②DOM的更多相关文章

第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)--基础中的基础概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMASc ...
第一百一十四节，JavaScript文档对象，DOM进阶
JavaScript文档对象,DOM进阶学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
前端基础之DOM和BOM
前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
php面试专题---12、JavaScript和jQuery基础考点
php面试专题---12.JavaScript和jQuery基础考点一.总结一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...
100多个很有用的JavaScript函数以及基础写法大集合
100多个很有用的JavaScript函数以及基础写法大集合 1.document.write("");为输出语句2.JS中的注释为//3.传统的HTML文档顺序是:docume ...
《高性能javascript》领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
《高性能javascript》领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

NYOJ--21--bfs--三个水杯
/* 输入第一行一个整数N(0<N<50)表示N组测试数据接下来每组测试数据有两行,第一行给出三个整数V1 V2 V3 (V1>V2>V3 V1<100 V3> ...
Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，拦截器Ajax请求
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 >>>>>>>>>>>>>>&g ...
selenium+python开发环境的搭建
web 调试工具介绍和开发环境搭建 python与selenium开发环境搭建: 一.下载python软件:https://www.python.org/ 下载完后,进行安装,安装成功后,打开IDLE ...
IAT重定向之修复
.. 仅允许非商业转载,转载请注明出处
史上最全的java随机数生成算法[转载]
package com.zuidaima.core.util; import java.util.Random; public class RandomUtil { public static fin ...
第一个简单的python程序，模拟购物车
第一个pyhone程序,简单的购物车功能,刚开始学习,练习下手感. #/usr/bin/env python#-*- coding:utf-8 -*- salary = int(raw_input(& ...
window响应拖拽文件操作
window响应拖拽文件操作 1.首先调用DragAcceptFiles,让控件或者窗体支持文件拖动操作函数功能:用来为拖放文件作初始化.函数原型: void DragAcceptFiles( HWN ...
SQL连接、合并、子查询
连接:连接分为内连接.外连接.交叉连接内连接和外连接都是在笛卡尔积的基础做一些修改. 合并查询:把两个相似的结果可以用union联合起来. mysql> select id,time from ...
Python 第四天
高级特性切片操作符我们可以使用切片操作符获取 tuple 或者 list 中指定范围内的元素 list1 = [1,2,3,4,5,8,7,6,10] list2 = [1:3] #[2.3] l ...
python自动化运维四：nmap端口扫描
p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 端口扫描器: Python的第三方模块python-nmap可以实现高效的端口扫描. ...