首頁 > 開發者 > JavaScript
對於DOM，我們要瞭解它的性質，這是針對HTML XML文檔的一個API。它描繪了一個層次化的節點樹，允許開發人員進行，增刪改查。下面以一個HTML片段來說明DOM節點樹。
<html> <head> <title></title> </head> <body> <div> <p></p> </div> </body></html>
它描繪了一個層次化的節點樹，以html為根，依次是[head,body][title,div][p]。理清關係，才能明白如何操作。
如何判斷元素，在dom中Node對象定義了如何判斷元素的屬性，nodetype。
var a = document.getElementById("a");if(a.nodetype == 1){}
對於nodetype屬性，它返回的值，分別代表了一些含義，比如1，返回的是元素。2返回的是Attr。3返回的是TEXT。在判斷完a是否為元素，如果是，則可以使用nodename來返回它究竟是何元素標籤。
在一段HTML片段中，我們如何擷取它？
<html> <head></head> <body> <div id="de"> <a>1</a> <a>2</a> </div> </body></html>
如果我們要擷取id，var a = document.getElementById("de"); //返回一個對象
如果我們要擷取id為de下的內容呢？var b = a.getElementsByTagName("a"); //返回一個數組
如果我們要添加一個新的a連結呢？var d = document.createElement(a); a.appendChild(d); //建立一個元素，添加到de這個div中
我們還可以動態載入dom，一個比較簡單的方式，document.write("<a><3/a>");
當我們需要改變或者添加屬性時，可以：a.getAttribute("id"); a.setAttribute("title","de"); a.setAttribute("id","dell");
當我們需要遍曆節點時，可以使用childNodes屬性。
如果要尋找某個具體的元素，還可以如此：var b = a.getElementsByTagName("a")[0];
總的來說，操作DOM，可以用document.getElementById、document.getElementsByTagName來尋找元素，用getAttribute、setAttribute來修改屬性或者添加新的屬性，用document.createElement()、 document.createTextNode()方法來建立新的元素節點與文本節點，用Node.appendChild() Node.insertBefore() Node.replaceChild()來添加到文檔。用nodetype來判斷是否為元素，nodename nodevalue來返回是什麼類型的html 節點片段。
深入的瞭解，這裡建議參閱《JavaScript權威指南第五版》、《JavaScript進階程式設計第二版》。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
