常用的DOM操作

DOM（文档对象模型）操作是前端开发人员必须熟练掌握的技术，在与用户进行交互、处理后端返回的JSON（XML）文件等地方都需要用到DOM操作，下面列举一些常用的DOM操作。

---

1.获取节点

document.getElementById("myDiv");
document.getElementsByTagName("div");//一个集合,[0]获取集合中的第一个元素
document.getElementsByClassName("myDiv");//IE9以下不支持

2.创建节点

var myDiv = document.createElement("myDiv");
myDiv.innerHTML="我是新创建的节点";
document.getElementsByTagName("body")[0].appendChild(myDiv)//将新创建的节点追加到body中

document.createTextNode()方法同样用于添加文本，相对于innerHTML更加安全，并且兼容各主流浏览器。

3.插入、删除、创建节点

var father=document.getElementById("father");//获取父层div引用
var node1=document.getElementById("son");//获取父层下的一个子元素
var node2=document.createElement("div");
node2.innerHTML="我是新创建的";
father.appendChild(node2);//node2插入到最后的位置
father.insertBefore(node2,null);//同上
father.insertBefore(node2,node1);//node2插入到node1前面
father.replaceChild(node2,node1);//node2替换掉node1
father.removeChild(node1);//将node1从father节点中删除

4.节点复制

var cloneNode=father.cloneNode(true);//参数为true代表深复制（复制节点及其整个子节点树）参数为false代表浅复制（只复制节点本身）

5.设置、获取、删除节点属性

myDiv.setAttribute("id","first");
myDiv.getAttribute("id");//不能获取用户自定义的属性
myDiv.removeAttribute("id");

6.常用节点属性

myDiv.nodeName;//返回节点的名称
myDiv.nodeType;//返回节点的类型
myDiv.nodeValue;//返回节点的值（用于input等表单）
myDiv.childNodes;//返回子节点集合（包含空白换行等非元素节点）
myDiv.firstChild;//返回第一个子节点
myDiv.firstElementChild;//返回第一个元素子节点
myDiv.lastChild;//返回最后一个子节点
myDiv.lastElementChild;//返回最后一个元素子节点
myDiv.previousSibling;//返回前一个兄弟节点
myDiv.previousElementSibling;//返回前一个元素兄弟节点
myDiv.nextSibling;//返回后一个兄弟节点
myDiv.nextElementSibling;//返回后一个元素兄弟节点
myDiv.parentNode;//返回父节点
element.attributes["id"];//返回含有id属性的节点集合

7.处理后端返回的JSON

//xhr.onreadystatechange函数中
var json=JSON.parse(xhr.responseText);
for(var i=0;i<json.length;i++)
{
    //创建节点、添加属性、插入到document中
}

8.DOM操作优化

DOM操作会对浏览器的性能造成影响，因此要尽可能的减少甚至避免DOM操作。

//不推荐的做法
for(var i=0;i<json.length;i++)
{
    var div = document.createElement("div");
    div.innerHTML(json[i]);
    father.appendChild(div);
}

//推荐的做法
var fragment = document.createDocumentFragment();
for(var i=0;i<json.length;i++)
{
    var div = document.createElement("div");
    div.innerHTML(json[i]);//用innerHTML来代替createTextNode
    fragment.appendChild(div);
}
father.appendChild(fragment);

当DOM操作规模非常大时，将容器的display设为none，等节点操作完成后再设为可见，原理是隐藏的元素不会产生reflow（重构）。

尽可能地通过添加class来修改样式。