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來修改樣式