一、什么是DOM
DOM是W3C(万维网联盟)的标准。DOM定义了访问HTML和XML文档的标准。
"W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容,结构和样式。"
W3C DOM标准被分为3个不同的部分:
- 核心DOM-针对任何结构化文档的标准模型
- XML DOM-针对XML文档的标准模型
- HTML DOM-针对HTML文档的标准模型
什么是XML DOM?------》XML DOM定义了所有XML元素的对象和属性,以及访问它们的方法。
什么是HTML DOM?------》HTML DOM定义了所有HTML元素的对象和属性,以及访问它们的方法。
二、DOM节点
根据W3C的HTML DOM标准,HTML文档中所有内容都是节点(NODE):
- 整个文档是一个文档节点(document对象)
- 每个HTML元素是元素节点(element对象)
- HTML元素内的文本是文本节点(text对象)
- 每个HTML属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
节点属性:
- attributes-节点(元素)的属性节点
- nodeType-节点类型
- nodeValue-节点值
- nodeName-节点名称
- innerHTML-节点(元素)的文本值//这点是最重要的!!!当获取元素的文本值或者修改元素的文本值时;
导航属性:
//当有些你需要操作的元素,但是却找不到,你就需要通过可以找到的元素利用导航属性去找到;
- parentNode-节点(元素)的父节点(推荐)
- firstChild-节点下第一个子元素
- lastChild-节点下最后一个子元素
- childNodes-节点(元素)的子节点
- nextElementSibling-节点下一个标签节点
节点树中的节点彼此拥有层级关系
父(parent)、子(child)、同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或者姐妹)。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
访问HTML元素、访问HTML元素等同于访问节点,我们能够以不同的方式来访问HTML元素:
页面查找:
- 使用getElementByid()方法
- 使用getElementBytagName()方法
- 使用getElementByClassName()方法
- 使用getElementByName()方法
局部查找:即查询到一个标签后,再查询该标签下的其它标签,只支持getElementBytagName()、getElementByClassName();
三、HTML DOM Event(事件)
绑定事件的两种方式,一般采用第二种:
其它事件触发调用函数的情况:
如果上面第二种方式获取的元素对象包含多个元素,可以使用遍历对每一个元素进行事件绑定;
另:this参数: