本文實(shí)例講述了JS訪問DOM節(jié)點(diǎn)方法。分享給大家供大家參考，具體如下：

查找并訪問節(jié)點(diǎn)

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

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

通過使用一個(gè)元素節(jié)點(diǎn)的 parentNode、firstChild 以及 lastChild 屬性

getElementById() 和 getElementsByTagName()

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

這兩種方法會(huì)忽略文檔的結(jié)構(gòu)。假如您希望查找文檔中所有的 <p> 元素，getElementsByTagName() 會(huì)把它們?nèi)空业剑还?<p> 元素處于文檔中的哪個(gè)層次。同時(shí)，getElementById() 方法也會(huì)返回正確的元素，不論它被隱藏在文檔結(jié)構(gòu)中的什么位置。

這兩種方法會(huì)像您提供任何你所需要的 HTML 元素，不論它們?cè)谖臋n中所處的位置！

getElementById() 可通過指定的 ID 來返回元素：

getElementById() 語法

document.getElementById("ID");

注釋：getElementById() 無法工作在 XML 中。在 XML 文檔中，您必須通過擁有類型 id 的屬性來進(jìn)行搜索，而此類型必須在 XML DTD 中進(jìn)行聲明。

getElementsByTagName() 方法會(huì)使用指定的標(biāo)簽名返回所有的元素（作為一個(gè)節(jié)點(diǎn)列表），這些元素是您在使用此方法時(shí)所處的元素的后代。

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

getElementsByTagName() 語法

document.getElementsByTagName("標(biāo)簽名稱");

或者：

document.getElementById('ID').getElementsByTagName("標(biāo)簽名稱");

實(shí)例 1

下面這個(gè)例子會(huì)返回文檔中所有 <p> 元素的一個(gè)節(jié)點(diǎn)列表：

document.getElementsByTagName("p");

實(shí)例 2

下面這個(gè)例子會(huì)返回所有 <p> 元素的一個(gè)節(jié)點(diǎn)列表，且這些 <p> 元素必須是 id 為 "maindiv" 的元素的后代：

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

節(jié)點(diǎn)列表（nodeList）

當(dāng)我們使用節(jié)點(diǎn)列表時(shí)，通常要把此列表保存在一個(gè)變量中，就像這樣：

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

現(xiàn)在，變量 x 包含著頁面中所有 <p> 元素的一個(gè)列表，并且我們可以通過它們的索引號(hào)來訪問這些 <p> 元素。

注釋：索引號(hào)從 0 開始。

您可以通過使用 length 屬性來循環(huán)遍歷節(jié)點(diǎn)列表：

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

您也可以通過索引號(hào)來訪問某個(gè)具體的元素。

要訪問第三個(gè) <p> 元素，您可以這么寫：

var y=x[2];

parentNode、firstChild以及l(fā)astChild

這三個(gè)屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結(jié)構(gòu)，在文檔中進(jìn)行“短距離的旅行”。

請(qǐng)看下面這個(gè) HTML 片段：

<table>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>Alaska</td>
 </tr>
</table>

在上面的HTML代碼中，第一個(gè) <td> 是 <tr> 元素的首個(gè)子元素（firstChild），而最后一個(gè) <td> 是 <tr>元素的最后一個(gè)子元素（lastChild）。

此外，<tr> 是每個(gè) <td>元 素的父節(jié)點(diǎn)（parentNode）。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript替換操作技巧總結(jié)》、《JavaScript傳值操作技巧總結(jié)》、《javascript編碼操作技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論