JavaScript中對DOM節點的存取、建立、修改、刪除_基礎知識
- WBOY原創
- 2016-05-16 15:32:111607瀏覽
DOM
DOM就是Document object Model的縮寫。文檔物件模型是把XML或HTML以樹節點為表現形式的文檔。用DOM方法和屬性，你可以訪問，修改，刪除頁面上任意一個元素，也是可以新增一個元素。 DOM是獨立於語言的API，可以被任意語言實現，當然也包括了Javascript
看看下面的一個文字。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My page</title> </head> <body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> </body> </html>
我們來看看第二段
<p><em>second</em> paragraph</p>
可以看到這是p標籤。它被包含在body標籤中。所以說body是p的父節點，p是子節點。第一段和第三段也是body的子節點。它們都是第二段的兄弟節點。這個em標籤是第二段p的子節點。因此p就是它的父節點。父子節點關係能描繪出像樹一樣的關係。所以叫做DOM結構樹(DOM tree).
Core DOM 和 HTML DOM
我們已經知道DOM可以描繪出HTML和XML文件。事實上HTML文檔就是XML文檔，只不過更規範些。因此作為DOM Level 1的一部分，Core DOM規範適用於所有XML文檔以及HTML DOM規範擴展了Core DOM.當然HTML DOM不能適用於所有的XML文檔，僅適用於HTML文檔。讓我們來看看Core DOM和HTML DOM的構造器。
構造器關係
訪問DOM節點
當要驗證表單或更換圖片之前，我們要知道怎麼樣存取元素(element.)。有很多方法獲取元素。
Document節點
透過document我們可以存取目前的文件。我們可以透過firebugs（火狐插件），來查看document的屬性和方法。
所有的節點都有nodeType,nodeName,nodeValue的屬性。我們來看看document的nodeType是什麼
document.nodeType;//9
一共有12節點類型。 document是9。常用的是元素(element:1),屬性(attribute:2),文本(text:3)。
節點還有名稱。對於HTML標籤。節點名稱就是標籤名稱。文字節點(text)的名字是#text.文檔節點(document)的名字是#document.
節點也有值。對於文字節點，值就是文字。 document的值為null
documentElement
XML都會有個ROOT節點來包裝文件包含起來。對於HTML文件。 ROOT節點就是html標籤。訪問root節點。可以用documentElement的屬性。
document.documentElement;//<html> document.documentElement.nodeType;//1 document.documentElement.nodeName;//HTML document.documentElement.tagName;//对于element，nodeName和tagName相同
Child Nodes
為了確定是否包含子節點我們可以用以下方法
document.documentElement.hasChildNodes();//true
HTML有兩個子節點。
document.documentElement.childNodes.length;//2 document.documentElement.childNodes[0];//<head> document.documentElement.childNodes[1];//<body>
也可以透過子節點存取父節點
document.documentElement.childNodes[1].parentNode;//<html>
我們把body的引用賦值變數
var bd = document.documentElement.childNodes[1]; bd.childNodes.length;//9
讓我們來看看body的結構
<body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body>
為什麼子節點個數為9個呢。
首先是4個P還有一個註釋一共4個。
4個節點包含了3個空白的節點。這就7個。
第8個在body和第一個p之間的空白節點。
第9個就是在註解與