JS訪問DOM節點方法詳解

本文實例講述了JS存取DOM節點方法。分享給大家供大家參考，具體如下：

查找並訪問節點

你可透過若干種方法來查找您希望操作的元素：

透過使用 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 元素的 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 片段：
<table>  
<tr>   
<td>John</td>   
<td>Doe</td>   
<td>Alaska</td>  
</tr> 
</table>
在上面的HTML程式碼中，第一個 
 是 
 元素的首個子元素（firstChild），而最後一個 
是 

元素的最後一個子元素（lastChild）。 
此外，

 是每個 元 素的父節點（parentNode）。