Web前端面试指导(二十三)：怎样创建、添加、移除、移动、和查找节点?

创建元素

 1.createDocumentFragment()

创建一个虚拟节点对象,对于频繁操作DOM时推荐使用，减少对页面重绘频率从而提高页面响应的速度。

例证

 示例1 使用DOM频繁创建、添加节点

console.time("纯DOM操作");
for (var i = 0; i < 10000; i++) {
 vardiv = document.createElement("div");
 div.innerHTML = "你好" + i;
 //dom.appendChild(div)
 document.body.appendChild(div);
 //console.log(dom);
}
console.timeEnd("纯DOM操作");

 示例2：使用Fragment频繁创建、添加节点

console.time("Fragment操作")
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10000; i++) {
  vardiv = document.createElement("div");
 div.innerHTML = "你好" + i;
 //dom.appendChild(div)
 fragment.appendChild(div);
 //console.log(dom);
} document.body.appendChild(fragment);
console.timeEnd("Fragment操作")

耗时对比 

DOM操作耗时		Fragment操作耗时
Firefox	Chrome	Firefox	Chrome
38.44ms	83.720ms	27.13ms	76.589ms

2.createElement()

根据标签名称创建一个具体的元素，对应的属性为innerHTML，此方法使用的频率高，创建元素基本上都会选择这种方法。

3.createTextNode() 

创建一个文本节点，对应的属性为innerText。

移除元素

parentNode.removeChild(childNode)

替换元素

parentNode.replaceChild(newChild,oldChild);//替换元素

插入元素

parentNode.insertBefore(newChild,refChild)//在refChild前插入节点

追加元素

parentNode.appendChild(childNode)

查找

1)   parentNode.getElementsByTagName(tagName)获取所在父节点下的指定标签名节点,返回HTMLCollection类型

2)   document.getElementsByClassName(className)//根据类名获取节点，返回HTMLCollection

3)   document.getElementById(id)//通过元素Id，唯一性

4)   高级选择器 document.querySelector

语法：document.querySelector(CSS selectors)

jQuery底层的选择器就是利用它来的，可以根据标签、id、类选择器一起使用。

document.querySelector("p");//选择<p>元素

document.querySelector(".wrapper");//选择类名为wrapper

document.querySelector("#div");//选择ID名为div的元素

document.querySelector("a[target]");//选择a标签有target属性元素