DOM（文档对象模型）操作是前端开发人员必须熟练掌握的技术，在与用户进行交互、处理后端返回的JSON（XML）文件等地方都需要用到DOM操作，下面列举一些常用的DOM操作 * * * * * ####1.获取节点 ~~~ document.getElementById("myDiv"); document.getElementsByTagName("div");//一个集合,[0]获取集合中的第一个元素 document.getElementsByClassName("myDiv");//IE9以下不支持 ~~~ <br> ####2.创建节点 ~~~ var myDiv = document.createElement("myDiv"); myDiv.innerHTML="我是新创建的节点"; document.getElementsByTagName("body")[0].appendChild(myDiv)//将新创建的节点追加到body中 ~~~ document.createTextNode()方法同样用于添加文本，相对于innerHTML更加安全，并且兼容各主流浏览器 <br> ####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节点中删除 ~~~ <br> ####4.节点复制 ~~~ var cloneNode=father.cloneNode(true);//参数为true代表深复制（复制节点及其整个子节点树）参数为false代表浅复制（只复制节点本身） ~~~ <br> ####5.设置、获取、删除节点属性 ~~~ myDiv.setAttribute("id","first"); myDiv.getAttribute("id");//不能获取用户自定义的属性 myDiv.removeAttribute("id"); ~~~ <br> ####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属性的节点集合 ~~~ <br> ####7.处理后端返回的JSON ~~~ //xhr.onreadystatechange函数中 var json=JSON.parse(xhr.responseText); for(var i=0;i<json.length;i++) { //创建节点、添加属性、插入到document中 } ~~~ <br> ####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来修改样式