检索现有的 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 时，此数字可能会更改。