查找並訪問節點
你可通過若干種方法來查找您希望操作的元素:
- 通過使用 getElementById() 和 getElementsByTagName() 方法
- 通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
getElementById() 和 getElementsByTagName()
getElementById() 和 getElementsByTagName() 這兩種方法,可查找整個 HTML 文檔中的任何 HTML 元素。
這兩種方法會忽略文檔的結構。假如您希望查找文檔中所有的
元素,getElementsByTagName() 會把它們全部找到,不管
元素處於文檔中的哪個層次。同時,getElementById() 方法也會返回正確的元素,不論它被隱藏在文檔結構中的什麼位置。
這兩種方法會像您提供任何你所需要的 HTML 元素,不論它們在文檔中所處的位置!
getElementById() 可通過指定的 ID 來返回元素:
getElementById() 語法
document.getElementById("ID");
註釋:getElementById() 無法工作在 XML 中。在 XML 文檔中,您必須通過擁有類型 id 的屬性來進行搜索,而此類型必須在 XML DTD 中進行聲明。
getElementsByTagName() 方法會使用指定的標籤名返回所有的元素(作爲一個節點列表),這些元素是您在使用此方法時所處的元素的後代。
getElementsByTagName() 可被用於任何的 HTML 元素:
getElementsByTagName() 語法
document.getElementsByTagName("標籤名稱");
或者:
document.getElementById('ID').getElementsByTagName("標籤名稱");
實例 1
下面這個例子會返回文檔中所有
元素的一個節點列表:
document.getElementsByTagName("p");
實例 2
下面這個例子會返回所有
元素的一個節點列表,且這些
元素必須是 id 爲 "maindiv" 的元素的後代:
document.getElementById('maindiv').getElementsByTagName("p");
節點列表(nodeList)
當我們使用節點列表時,通常要把此列表保存在一個變量中,就像這樣:
var x=document.getElementsByTagName("p");
現在,變量 x 包含着頁面中所有
元素的一個列表,並且我們可以通過它們的索引號來訪問這些
元素。
註釋:索引號從 0 開始。
您可以通過使用 length 屬性來循環遍歷節點列表:
var x=document.getElementsByTagName("p"); for (var i=0;i
您也可以通過索引號來訪問某個具體的元素。
要訪問第三個
元素,您可以這麼寫:
var y=x[2];
parentNode、firstChild以及lastChild
這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構,在文檔中進行“短距離的旅行”。
請看下面這個 HTML 片段:
John | Doe | Alaska |
在上面的HTML代碼中,第一個
是 是此外,
元 素的父節點(parentNode)。對 firstChild 最普遍的用法是訪問某個元素的文本:
var x=[a paragraph]; var text=x.firstChild.nodeValue;
parentNode 屬性常被用來改變文檔的結構。假設您希望從文檔中刪除帶有 id 爲 "maindiv" 的節點:
var x=document.getElementById("maindiv"); x.parentNode.removeChild(x);
首先,您需要找到帶有指定 id 的節點,然後移至其父節點並執行 removeChild() 方法。
根節點
有兩種特殊的文檔屬性可用來訪問根節點:
- document.documentElement
- document.body
第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴展,提供了對
標籤的直接訪問。