JS訪問DOM節點方法詳解_javascript技巧

本文執行個體講述了JS訪問DOM節點方法。分享給大家供大家參考，具體如下：

尋找並訪問節點

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

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

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

getElementById() 和 getElementsByTagName()

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

這兩種方法會忽略文檔的結構。假如您希望尋找文檔中所有的 <p> 元素，getElementsByTagName() 會把它們全部找到，不管 <p> 元素處於文檔中的哪個層次。同時，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

下面這個例子會返迴文檔中所有 <p> 元素的一個節點列表：

document.getElementsByTagName("p");

執行個體 2

下面這個例子會返回所有 <p> 元素的一個節點列表，且這些 <p> 元素必須是 id 為 "maindiv" 的元素的後代：

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

節點列表（nodeList）

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

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

現在，變數 x 包含著頁面中所有 <p> 元素的一個列表，並且我們可以通過它們的索引號來訪問這些 <p> 元素。

注釋：索引號從 0 開始。

您可以通過使用 length 屬性來迴圈遍曆節點列表：

var x=document.getElementsByTagName("p");for (var i=0;i<x.length;i++){ // do something with each paragraph}

您也可以通過索引號來訪問某個具體的元素。

要訪問第三個 <p> 元素，您可以這麼寫：

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代碼中，第一個 <td> 是 <tr> 元素的首個子項目（firstChild），而最後一個 <td> 是 <tr>元素的最後一個子項目（lastChild）。

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

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript替換操作技巧總結》、《JavaScript傳值操作技巧總結》、《javascript編碼操作技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍曆演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所協助。