JavaScript中的dom是什麼？如何存取dom節點
- 伊谢尔伦原創
- 2017-07-20 13:20:541990瀏覽
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).
訪問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的結構
first paragraph
<p><em>second</em> paragraph</p>final
為什麼子節點數為9個呢。
首先是4個P還有一個註解總共4個。
4個節點包含了3個空白的節點。這就7個。
第8個在body和第一個p之間的空白節點。
第9個就是在註解與36cc49f0c466276486e50c850b7e4956之間的空白節點。
共9個節點。
快速存取DOM
#透過childNodes,parentNode,nodeName,nodeValue以及attributes,可以存取文件任意的節點了。但是在實際運用過程中，文字節點是比較討厭的。如果文字改變了，有可能就影響腳本了。還有如果DOM樹有足夠的深入，那麼訪問起來的確有些不方便。幸好我們可以用更方便的方法來存取節點。這些方法是
getElementsByTagName() getElementsByName() getElementById()
先說下getElementsByTagName()
透過一個標籤名稱(tag name)來取得一個html元素的集合。例子如下
document.getElementsByTagName('p').length;//3
因為傳回的是一個集合，我們可以用過陣列下標的形式來存取或透過item方法。比較一下還是推薦用陣列的存取方法。更簡單一些。
document.getElementsByTagName('p')[0];// <p class="opener"> document.getElementsByTagName('p').item(0);//和上面的结果一样 document.getElementsByTagName('p')[0].innerHTML;//first paragraph
存取元素的屬性，可以用attributes集合。但是更簡單的方法是直接作為一個屬性來存取就行。看個例子
document.getElementsByTagName('p')[2].id;//closer
要注意的是，class屬性不能正常的使用。 。要用className。因為class在javascript規格中是保留字。
document.getElementsByTagName('p')[0].className;//opener
我們可以用以下方法存取頁面所有元素
<span style="color: #ff0000;">document.getElementsByTagName('*').length;//9</span>
注意：在IE早期的版本不支持上述方法。可以用document.all來取代。 IE7已經支援了，但是傳回的是所有節點(node)，而不僅僅是元素節點(element nodes)。
Siblings, Body, First, Last Child
nextSibling和previousSibling是兩個較方便存取DOM的方法。用來存取相鄰的節點的。範例如下
var para = document.getElementById('closer') para.nextSibling;//"\n" para.previousSibling;//"\n" para.previousSibling.previousSibling;//<p> para.previousSibling.previousSibling.previousSibling;//"\n" para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">
body 用來存取body元素的。
document.body;//<body>
firstChild 和lastChild 。 firstChild是和childNodes[0]一樣.lastChild和 childNodes[childNodes.length - 1]一樣。
以上是JavaScript中的dom是什麼？如何存取dom節點的詳細內容。更多資訊請關注PHP中文網其他相關文章！