檢索現有的 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 時，此數字可能會更改。