javascript尋找並存取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 元素：

getElementsByTagName() 語法

#

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

或：

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

#實例1

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

元素的一個節點列表：

document.getElementsByTagName("p");

實例2

下面這個範例會傳回所有

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

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

document.getElementById('mainp').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）。

以上是javascript尋找並存取dom節點的方法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！