Dom

Dom操作

上下遍历

Node.parentNode,Node.childNodes,Node.firstChild,Node.lastNode.

左右遍历

Node.previousSibling,Node.nextSibling.

Node操作

添加 Node.appendChild()
删除 Node.removeChild()
复制 Node.clone(boolean) =>true 深度克隆 false 只克隆标签
创建 document.createElement()
选择 =>document.getElementById(),getElementsByClassName(),getElementsByTagName(),querySelector

getElement(s)By…与querySelector的区别

1.性能：getElement(s)By…的性能要比querySelector快很多。
2.querySelector选择出来的是静态的，getElement选出来的是动态的=>比如动态生成的元素可以用querySelector给每一个该对象生成方法。(新建文件夹)

class操作

elem.className
elem.classList=>add(class),remove(class),contains(class),item(index),toggle(class,boolean)。

document fragments

dom批量操作要用createDocumentFragment()

var docFragment = document.createDocumentFragment();

for (var i = counts; i > 0; i--) {
    var node = document.createElement('p');
    var node_text = document.createTextNode(i + ', hehe');

    node.appendChild(node_text);

    docFragment.appendChild(node);
}

document.body.appendChild(docFragment);

innerHTML

也可以

var d= document.createElement('div');
	var html="";
	for (var i = counts; i > 0; i--) {
		html += '<p>i+' hehe'</p>';
	}
	d.innerHTMl = html;
	document.body.appendChild(d);

总结：innerHTML与createDocumentFragment 都比createElement和append占优势，少量数据时innerHTml最优，多数据或者改数据createDocumentFragment最优

但是innerHTML还有两个缺点：

1.如果你在原来的子元素上绑定了事件的话，重写后事件绑定仍然还在
2.js代码和html代码耦合程度高，不利于维护

innertext => 不包括标签