JS（七）：JS的DOM节点、Event（事件）

一、什么是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参数：