DOM API 详细总结和兼容方法

兼容问题不考虑IE9之前

DOM中的节点类型和对应的nodeType值：
Element (1) ：元素节点。[可有子节点]
Attr (2) ：特性节点。
Text (3) ：文本节点。
Comment (8)：注释节点。
Document (9)：文档节点。[可有子节点(有限)]
DocumentType (10)：文档类型声明节点。
DocumentFragment (11): 文档片段节点。[可有子节点]

一、节点创建

1、创建元素节点

document.createElement() 是最常用的，用于创建一个新的元素节点。且在所有主流浏览器中都支持。

var div = document.createElement('div');  // 创建一个div节点

2、克隆节点

(1) document.cloneNode() 适用于所有节点类型。有两种克隆方式：深复制可以得到包含的子节点，浅复制不能得到子节点。该方法只会复制特性，而不会复制事件。在IE中会复制事件处理程序，所以建议：复制前最好先移除事件处理程序。

var deepList = myList.cloneNode(true);  //深复制

(2) document.impotNode() 把一个节点从另一个文档复制到该文档以便应用。

3、创建文本节点和文档写入

（1）document.createTextNode() 只创建一个文本节点，就算传入的字符串中包含html标签也不会被解析而是被当做文本字符。
（2）document.write() 、document.writeIn() 会将传入的字符串原样写入文档(后者会换行)。注意：在页面加载之后调用会重写页面。该方法是文档对象document的一个方法，因此不能在特定节点里写入内容，有一定局限性。
（3）innerHTML、outerHTML 这两个属性适用于“给文档插入大量新HTML标记”的情景。在写模式下，它的值会被解析为DOM树。局限：不适用于插入