2.知识剖析

节点这个词是一个网络用语，代表了网络中的一个连接点。一个网络就是由一些节点构成的集合。

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。
Document：整个文档树的顶层节点
DocumentType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的属性
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

常见的DOM操作

查找DOM节点

1.id查找 document.getElementById()
2.class查找 document.getElementsByClassName()
3.标签查找 document.getElementsByClassName()

HTML DOM - 改变 HTML

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

document.getElementById(id).innerHTML=新的 HTML

改变 HTML 样式

document.getElementById("p2").style.color="blue"

DOM事件

允许 JavaScript 对 HTML 事件作出反应
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起

HTML DOM EventListener

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄。
可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown")
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获，true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

DOM二级事件

2级DOM的事件传播分三个阶段进行。
1.capturing阶段，事件从Document对象沿着文档树向下传播给节点。如果目标的任何一个祖先专门注册了事件监听函数，那么在事件传播的过程中就会运行这些函数。
2.下一个阶段发生在目标节点自身，直接注册在目标上的适合的事件监听函数将运行。
3.是bubbling阶段，这个阶段事件将从目标元素向上传播回Document对象（与capturing相反的阶段）。虽然所有事件都受capturing阶段的支配，但并不是所有类型的事件都bubbling。（0级DOM事件模型处理没有capturing阶段）
即1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段

3.常见问题

如何阻止事件冒泡

4.解决方案

使用event.stopPropagation( );

另一种方式是通过event.target， target指向了触发事件的那个具体对象. 可以使用 if(event.target==this){ //语句 }

5.编码实战

6.扩展思考

7.参考文献

1.JavaScript高级程序设计

2.head first JavaScript

8 更多讨论

鸣谢

感谢大家观看

BY : 王刚