HTML DOM 訪問節(jié)點(diǎn)
通過 DOM,您可訪問 HTML 文檔中的每個(gè)節(jié)點(diǎn)。
查找并訪問節(jié)點(diǎn)
你可通過若干種方法來查找您希望操作的元素:
- 通過使用 getElementById() 和 getElementsByTagName() 方法
- 通過使用一個(gè)元素節(jié)點(diǎn)的 parentNode、firstChild 以及 lastChild 屬性
getElementById() 和 getElementsByTagName()
getElementById() 和 getElementsByTagName() 這兩種方法,可查找整個(gè) HTML 文檔中的任何 HTML 元素。
這兩種方法會(huì)忽略文檔的結(jié)構(gòu)。假如您希望查找文檔中所有的 <p> 元素,getElementsByTagName() 會(huì)把它們?nèi)空业剑还?<p> 元素處于文檔中的哪個(gè)層次。同時(shí),getElementById() 方法也會(huì)返回正確的元素,不論它被隱藏在文檔結(jié)構(gòu)中的什么位置。
這兩種方法會(huì)向您提供任何你所需要的 HTML 元素,不論它們?cè)谖臋n中所處的位置!
getElementById() 可通過指定的 ID 來返回元素:
getElementById() 語法
document.getElementById("ID");
注釋:getElementById() 無法工作在 XML 中。在 XML 文檔中,您必須通過擁有類型 id 的屬性來進(jìn)行搜索,而此類型必須在 XML DTD 中進(jìn)行聲明。
getElementsByTagName() 方法會(huì)使用指定的標(biāo)簽名返回所有的元素(作為一個(gè)節(jié)點(diǎn)列表),這些元素是您在使用此方法時(shí)所處的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素:
getElementsByTagName() 語法
document.getElementsByTagName("標(biāo)簽名稱");
或者:
document.getElementById('ID').getElementsByTagName("標(biāo)簽名稱");
實(shí)例 1
下面這個(gè)例子會(huì)返回文檔中所有 <p> 元素的一個(gè)節(jié)點(diǎn)列表:
document.getElementsByTagName("p");
實(shí)例 2
下面這個(gè)例子會(huì)返回所有 <p> 元素的一個(gè)節(jié)點(diǎn)列表,且這些 <p> 元素必須是 id 為 "maindiv" 的元素的后代:
document.getElementById('maindiv').getElementsByTagName("p");
節(jié)點(diǎn)列表(nodeList)
當(dāng)我們使用節(jié)點(diǎn)列表時(shí),通常要把此列表保存在一個(gè)變量中,就像這樣:
var x=document.getElementsByTagName("p");
現(xiàn)在,變量 x 包含著頁面中所有 <p> 元素的一個(gè)列表,并且我們可以通過它們的索引號(hào)來訪問這些 <p> 元素。
注釋:索引號(hào)從 0 開始。
您可以通過使用 length 屬性來循環(huán)遍歷節(jié)點(diǎn)列表:
var x=document.getElementsByTagName("p"); for (var i=0;i<x.length;i++) { // do something with each paragraph }
您也可以通過索引號(hào)來訪問某個(gè)具體的元素。
要訪問第三個(gè) <p> 元素,您可以這么寫:
var y=x[2];
parentNode、firstChild以及l(fā)astChild
這三個(gè)屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結(jié)構(gòu),在文檔中進(jìn)行“短距離的旅行”。
請(qǐng)看下面這個(gè) HTML 片段:
<table> <tr> <td>John</td> <td>Doe</td> <td>Alaska</td> </tr> </table>
在上面的HTML代碼中,第一個(gè) <td> 是 <tr> 元素的首個(gè)子元素(firstChild),而最后一個(gè) <td> 是 <tr>元素的最后一個(gè)子元素(lastChild)。
此外,<tr> 是每個(gè) <td>元 素的父節(jié)點(diǎn)(parentNode)。
對(duì) firstChild 最普遍的用法是訪問某個(gè)元素的文本:
var x=[a paragraph]; var text=x.firstChild.nodeValue;
parentNode 屬性常被用來改變文檔的結(jié)構(gòu)。假設(shè)您希望從文檔中刪除帶有 id 為 "maindiv" 的節(jié)點(diǎn):
var x=document.getElementById("maindiv"); x.parentNode.removeChild(x);
首先,您需要找到帶有指定 id 的節(jié)點(diǎn),然后移至其父節(jié)點(diǎn)并執(zhí)行 removeChild() 方法。
根節(jié)點(diǎn)
有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn):
- document.documentElement
- document.body
第一個(gè)屬性可返回存在于 XML 以及 HTML 文檔中的文檔根節(jié)點(diǎn)。
第二個(gè)屬性是對(duì) HTML 頁面的特殊擴(kuò)展,提供了對(duì) <body> 標(biāo)簽的直接訪問。