檢索現有的 html 元素

最常見的任務之一是從 DOM 中檢索現有元素進行操作。最常見的是這些方法在 document 上執行,因為它是根節點,但所有這些方法都適用於樹中的任何 HTML 元素。它們只會從執行它的節點返回子節點。

通過 id 檢索

var element = document.getElementById("logo");

element 將包含將其 id 屬性設定為 logo 的(唯一)元素,或者如果不存在此類元素則包含 null。如果存在具有此 id 的多個元素,則該文件無效,並且可能發生任何事情。

按標籤名稱檢索

var elements = document.getElementsByTagName("a");

elements 將包含文件中所有連結標記的實時 HTMLCollection(類似於陣列的物件)。此集合與 DOM 同步,因此對 DOM 所做的任何更改都會反映在此集合中。該集合提供隨機訪問並具有長度。

var element = elements[0];
//Alternative
element = elements.item(0);

element 包含第一個遇到的 HTML 連結元素,如果索引超出範圍,則包含 null

var length = elements.length;

length 等於列表中當前的 HTML 連結元素的數量。更改 DOM 時,此數字可能會更改。

按類檢索

var elements = document.getElementsByClassName("recipe");

elements 將包含所有元素的實時 HTMLCollection(類似陣列的物件),其 class 屬性包含 recipe。此集合與 DOM 同步,因此對 DOM 所做的任何更改都會反映在此集合中。該集合提供隨機訪問並具有長度。

var element = elements[0];
//Alternative
element = elements.item(0);

element 包含第一個遇到此類的 HTML 元素。如果沒有這樣的元素,則 element 在第一個示例中具有值 undefined,在第二個示例中具有 null

var length = elements.length;

length 等於當前具有類 recipe 的 HTML 元素的數量。更改 DOM 時,此數字可能會更改。

按名稱檢索

var elements = document.getElementsByName("zipcode");

elements 將包含所有元素的 live NodeList(類似陣列的物件),其 name 屬性設定為 zipcode。此集合與 DOM 同步,因此對 DOM 所做的任何更改都會反映在此集合中。該集合提供隨機訪問並具有長度。

var element = elements[0];
//Alternative
element = elements.item(0);

element 包含第一個遇到此名稱的 HTML 元素。

var length = elements.length;

length 等於當前具有 zipcode 作為其 name 屬性的 HTML 元素的數量。更改 DOM 時,此數字可能會更改。