DOM的檢視與訪問

2021-06-17 15:55:28 字數 2152 閱讀 1484

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

通過使用 getelementbyid() 和 getelementsbytagname() 方法

通過使用乙個元素節點的 parentnode、firstchild 以及 lastchild 屬性

getelementbyid() 和 getelementsbytagname() 這兩種方法,可查詢整個 html 文件中的任何 html 元素。

這兩種方法會忽略文件的結構。假如您希望查詢文件中所有的 元素,getelementsbytagname() 會把它們全部找到,不管 元素處於文件中的哪個層次。同時,getelementbyid() 方法也會返回正確的元素,不論它被隱藏在文件結構中的什麼位置。

這兩種方法會向您提供任何你所需要的 html 元素,不論它們在文件中所處的位置!

getelementbyid() 可通過指定的 id 來返回元素:

document.getelementbyid("id");注釋:getelementbyid() 無法工作在 xml 中。在 xml 文件中,您必須通過擁有型別 id 的屬性來進行搜尋,而此型別必須在 xml dtd 中進行宣告。

getelementsbytagname() 方法會使用指定的標籤名返回所有的元素(作為乙個節點列表),這些元素是您在使用此方法時所處的元素的後代。

getelementsbytagname() 可被用於任何的 html 元素:

document.getelementsbytagname("標籤名稱");或者:

document.getelementbyid('id').getelementsbytagname("標籤名稱");

下面這個例子會返回文件中所有 元素的乙個節點列表:

document.getelementsbytagname("p");

下面這個例子會返回所有 元素的乙個節點列表,且這些 元素必須是 id 為 "maindiv" 的元素的後代:

document.getelementbyid('maindiv').getelementsbytagname("p");

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

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 片段:

[1]

john

doealaska

在上面的html**中,第乙個 是 元素的首個子元素(firstchild),而最後乙個 是 元素的最後乙個子元素(lastchild)。

此外,是每個 元 素的父節點(parentnode)。

對 firstchild 最普遍的用法是訪問某個元素的文字:

var x=[a paragraph]; var text=x.firstchild.nodevalue;parentnode 屬性常被用來改變文件的結構。假設您希望從文件中刪除帶有 id 為 "maindiv" 的節點:

var x=document.getelementbyid("maindiv"); x.parentnode.removechild(x);首先,您需要找到帶有指定 id 的節點,然後移至其父節點並執行 removechild() 方法。

[1]dom的優勢主要表現在:易用性強,使用dom時,將把所有的xml文件資訊都存於記憶體中,並且遍歷簡單,支援xpath,增強了易用性。

dom的缺點主要表現在:效率低,解析速度慢,記憶體佔用量過高,對於大檔案來說幾乎不可能使用。另外效率低還表現在大量的消耗時間,因為使用dom進行解析時,將為文件的每個element、attribute、processing-instruction和comment都建立乙個物件,這樣在dom機制中所運用的大量物件的建立和銷毀無疑會影響其效率。

DOM 訪問節點

dom 是這樣規定的 整個文件是乙個文件節點每個 html 標籤是乙個元素節點包含在 html 元素中的文字是文字節點每乙個 html 屬性是乙個屬性節點注釋屬於注釋節點 通過是使用getelementbyid 和 getelementsbytagname 方法 通過使用乙個元素節點的 parent...

DOM 訪問元素

使用getelementbyid 方法可以準確的獲取文件中指定元素 document.getelementbyid id 引數id表示文件中對應元素的id值。如果文件中不存在指定元素,則返回null。該方法只適用於document物件。世界之大,無奇不有 此方法獲取的是元素的calss屬性,從函式的...

訪問受控的dom節點

要訪問受react控制的dom節點 即父元件訪問子元件 利用子元件的ref屬性,從而獲得子元件的引用 注意 1 ref的值是唯一的 2 通過this.refs訪問的節點為v dom節點,不能直接操作 要讓訪問的v dom變成可操作 finddomnode方法 是reactdom模組的方法,主要用於根...