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

時(shí)間：2022-02-16 22:34:01 | 來(lái)源：信息時(shí)代

時(shí)間：2022-02-16 22:34:01 來(lái)源：信息時(shí)代

你可通過(guò)若干種方法來(lái)查找您希望操作的元素：

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

通過(guò)使用一個(gè)元素節(jié)點(diǎn)的parentNode、firstChild以及l(fā)astChild屬性

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

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

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

getElementById()可通過(guò)指定的ID來(lái)返回元素：

getElementById()語(yǔ)法

document.getElementById('ID');注釋：getElementById()無(wú)法工作在XML中。在XML文檔中，您必須通過(guò)擁有類型id的屬性來(lái)進(jìn)行搜索，而此類型必須在XMLDTD中進(jìn)行聲明。

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

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

getElementsByTagName()語(yǔ)法

document.getElementsByTagName('標(biāo)簽名稱');或者：

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

實(shí)例1

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

document.getElementsByTagName('p');

實(shí)例2

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

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

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

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

varx=document.getElementsByTagName('p');現(xiàn)在，變量x包含著頁(yè)面中所有元素的一個(gè)列表，并且我們可以通過(guò)它們的索引號(hào)來(lái)訪問(wèn)這些元素。

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

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

varx=document.getElementsByTagName('p');for(vari=0;i
要訪問(wèn)第三個(gè)元素，您可以這么寫(xiě)：

vary=x;

parentNode、firstChild以及l(fā)astChild

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

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

John

Doe

Alaska

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

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

對(duì)firstChild最普遍的用法是訪問(wèn)某個(gè)元素的文本：

varx=;vartext=x.firstChild.nodeValue;parentNode屬性常被用來(lái)改變文檔的結(jié)構(gòu)。假設(shè)您希望從文檔中刪除帶有id為'maindiv'的節(jié)點(diǎn)：

varx=document.getElementById('maindiv');x.parentNode.removeChild(x);首先，您需要找到帶有指定id的節(jié)點(diǎn)，然后移至其父節(jié)點(diǎn)并執(zhí)行removeChild()方法。

關(guān)鍵詞：訪問(wèn)

推薦文章

• pv提升網(wǎng)站頁(yè)面訪問(wèn)量的方法

  2022-02-16

• 訪問(wèn)控制訪問(wèn)控制的類型

  2022-02-14

• 訪問(wèn)控制訪問(wèn)控制列表

  2022-02-14

• 訪問(wèn)控制訪問(wèn)控制概述

  2022-02-14

• 訪問(wèn)量如何增加網(wǎng)站訪問(wèn)量

  2022-02-14

• 訪問(wèn)量相關(guān)概念

  2022-02-14

• 訪問(wèn)量計(jì)算標(biāo)準(zhǔn)

  2022-02-14