js-DOM常用操作-节点创建型API

节点创建型API

• 创建元素createElement

var div = creatElement('div');

参数：字符串，要创建的标签名；
返回新创建的元素节点；

• 创建文本节点createTextNode

var textNode = createTextNode(data);

参数：字符串；
返回新创建的文本节点；

• 克隆节点cloneNode

var copyNode = node.cloneNode(deep);

参数：布尔值，true代表属性和后代都拷贝，而false只拷贝该节点及其属性；
返回新克隆后的节点；

• createDocumentFragment

var fragment = document.createDocumentFragment();

DocumentFragment不属于文档树，暂时存放一些将要一次性插入文档的节点，常用于“文档片段优化法”。
例如，想要为一个 <ul></ul>添加100个<li></li>，如果每次循环都创建节点并添加的话会很耗性能。所以可以用DocumentFragment解决这个问题，每次创建好的节点先放到DocumentFragment里，最后一次性把DocumentFragment里存放的100个节点添加到 <ul></ul>里。

var list = document.getElementsByTagName('ul')[0];
var fragment = document.createDocumentFragment();
for(var i=0; i<100; i++){
    var li = document.creaetElement('li');
    fragment.appendChild(li);
}
list.appendChild(fragment);

总结：
1.创建型API在使用的时候仅仅是已经创建，不代表存在于HTML文档中，配合appendChild等添加操作才能加到文档中。
2.cloneNode在克隆时注意使用参数，子节点和绑定事件是否一起拷贝。
3.DocumentFragment不属于文档树，常用于“文档片段优化法”。