// DOM节点操作

1、节点的创建、插入、替换与克隆

>> 创建标签节点

document.createElement(标签名字)

>> 创建文本节点

document.createTextNode(文本内容)

>> 节点的增加

父元素.appendChild(子节点); == 将子节点添加到父元素的最后

>> 在某个元素之前插入新元素

父元素.insertBefore(新节点, 旧节点);

>> 节点的替换

父节点.replaceChild(新节点, 旧节点);

>> 节点的克隆

节点.cloneNode(boolean);

如果不带参数，则不复制该节点的所有子节点，只复制当前元素节点以及属性节点（包含 onclick 属性）;

如果参数为 true，则会复制所有子节点、元素节点、属性节点；

如果是获取节点之后再设置的事件，无论是否参数是否为true，该事件都不会复制。

2、操作节点内容

>> 元素.innerHTML ：会直接解析成 HTML 的格式显示；同时覆盖之前的节点内容；

>> 元素.innerText：不会直接解析 HTML ，而是当作文本直接覆盖节点内容;

>> 元素.outerHTML：解析 HTML 并替换原始节点。

1、DOM 2 级事件处理程序

1.1 添加事件的方式：

>> 元素.addEventListener(事件类型, 函数, 布尔值);

>> 注意：

布尔值 为 false，则代表事件冒泡，如果为 true，则代表 事件捕获。

事件类型：不带 'on' 的，直接写事件， 如： 'click'。

可以给同一个元素添加多个相同事件。

缺点：只支持 IE9+

2、IE 浏览器支持的添加事件方式：

元素.attachEvent('on' + 事件类型, 函数);