JS訪問DOM節點方法詳解

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

查找並訪問節點

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

透過使用getElementById() 和getElementsByTagName() 方法

透過使用一個元素節點的parentNode、firstChild 以及lastChild 屬性

getElementById() 和getElementsByTagName()

getElementById() 和getElementsByTagName() 這兩種方法，可找到整個HTML 文件中的任何HTML 元素。

這兩種方法會忽略文件的結構。假如您希望尋找文件中所有的

元素，getElementsByTagName() 會把它們全部找到，不管

元素處於文件中的哪個層次。同時，getElementById() 方法也會傳回正確的元素，無論它被隱藏在文件結構中的什麼位置。

這兩種方法會像您提供任何你所需要的 HTML 元素，無論它們在文件中所處的位置！

getElementById() 可透過指定的 ID 來傳回元素：

getElementById() 語法

document.getElementById("ID");

   

註解：getElementBy   

註解：getElementById() 無法在 XML 中運作。在 XML 文件中，您必須透過擁有類型 id 的屬性來進行搜索，而此類型必須在 XML DTD 中進行聲明。

getElementsByTagName() 方法會使用指定的標籤名稱傳回所有的元素（作為一個節點清單），這些元素是您在使用此方法時所處的元素的後代。

getElementsByTagName() 可用於任何的HTML 元素：

getElementsByTagName() 語法

document.getElementsByTagName("标签名称");

   

或：

下面這個範例會回傳文件中所有

元素的一個節點列表：

document.getElementById('ID').getElementsByTagName("标签名称");

   

實例2

下面這個例子會傳回所有

元素的一個節點列表，而這些

元素必須是id 為"maindiv" 的元素的後代：

document.getElementsByTagName("p");

   

節點列表（nodeList）

當我們使用節點列表時，通常要把此列表保存在一個變數中，就像這樣：

document.getElementById('maindiv').getElementsByTagName("p");

   頁面中所有

元素的一個列表，並且我們可以透過它們的索引號來存取這些

元素。

註記：索引號碼從 0 開始。

您可以透過使用 length 屬性來循環遍歷節點清單：

var x=document.getElementsByTagName("p");

   

您也可以透過索引號碼來存取某個特定的元素。

要存取第三個

元素，您可以這麼寫：

var x=document.getElementsByTagName("p");
for (var i=0;i
登入後複製

   

parentNode、firstChild以及lastChild

這三個屬性parentNode、firstld Child以及lastChild

這三個屬性parentNode、firstld 以及last 「短距離的旅行」。

請看下面這個HTML 片段：

var y=x[2];

   

在上面的HTML程式碼中，第一個 是 元素的首個子元素（firstChild），而最後一個 元素的首個子元素（firstChild），而最後一個元素的最後一個子元素（lastChild）。

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