動態操作DOM節點js實現

近日再次翻看《javascript物件導向編程指南》這本書，讀到瀏覽器環境一章，漸漸明白了js作為指令碼語言，需要依託宿主環境來實現功能，從瀏覽器角度考慮，就是對瀏覽器的BOM和DOM的操作。DOM操作又可分為：訪問、修改、刪除、建立。每種操作都有獨特的方法和屬性。下面取dom節點的訪問、建立和刪除的功能執行個體來講解（參考文章）。

function add()//動態添加表格的例子    {  var parNode = document.getElementById("Table1");     var tr=document.createElement("tr");    var td = document.createElement("td"); //建立一個td類型的Element節點     td.appendChild(document.createTextNode("這是第一列"));     tr.appendChild(td);           var td = document.createElement("td"); //建立一個td類型的Element節點        td.appendChild(document.createTextNode("這是第二列"));        tr.appendChild(td);        parNode.appendChild(tr); }function remove(){var parNode=document.getElementById("Table1");var tr=document.getElementsByTagName("tr");alert(tr);//從此處看出tr為nodelist即節點表，所以刪除節點需要指定具體哪個需要刪除parNode.removeChild(tr[0]);}

首先在html中建立兩個按鈕元素，分別單擊響應add和remove函數。兩個函數內getElementById、getElementByTagName屬於dom元素訪問的快速方法，createElement和CreateTextNode分別為建立元素和常值內容的方法，removeChild為移除子項目的方法同時也回答了引用文章評論的答案。