常用的DOM操作

1.背景介绍

DOM（文档对象模型）

DOM是针对于HTML和XML文档的一个API（应用程序编程接口）。是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

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

在DOM中，可以将任何HTML或者XML的文档描绘成一个由多层节点构成的结构

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 更多讨论

通过getElementsByClassName这种获取的节点集合如果进行操作？

由于获取的是collection集合，它具有数组的length属性但是并不是数组。需要将他转换为数组才可以使用数组专用的方法。

使用array.from（）方法可以将获取的集合转化为数组

如何获取相邻的节点？

neborNode.previousSibling :获取已知节点的相邻的上一个节点

nerbourNode.nextSlbling: 获取已知节点的下一个节点

可以复制节点么？

cloneNode(true | false);复制某个节点

什么是文档碎片？

createDocumentFragment() 用来创建文档碎片节点。 

文档碎片节点是若干DOM节点的集合，可以包括各种类型的节点，如 元素节点、文本节点、注释节点 等。文档碎片节点在创建之初是空的，需要向它添加节点。