querySelectorAll 和 getElementsBy* 方法返回什么？

Do getElementsByClassName（以及类似的功能，例如getElementsByTagName and querySelectorAll) 工作方式与getElementById或者它们返回一个元素数组？

我问的原因是因为我试图使用更改所有元素的样式getElementsByClassName。见下文。

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

Your getElementById https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById代码可以工作，因为 ID 必须是唯一的，因此该函数始终返回恰好一个元素（或null如果没有找到）。

然而，这些方法getElementsByClassName https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName, getElementsByName https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName, getElementsByTagName https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName, and getElementsByTagNameNS https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagNameNS返回一个可迭代的元素集合。

方法名称提供了提示：getElement暗示singular， 然而getElements暗示plural.

方法querySelector https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll还返回单个元素，并且querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll返回一个可迭代的集合。

可迭代集合可以是NodeList https://developer.mozilla.org/en-US/docs/Web/API/NodeList or an HTMLCollection https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection.

getElementsByName https://html.spec.whatwg.org/multipage/dom.html#the-document-object and querySelectorAll https://dom.spec.whatwg.org/#interface-parentnode都指定返回一个NodeList;另一个getElementsBy* methods https://dom.spec.whatwg.org/#interface-document被指定返回一个HTMLCollection，但请注意，某些浏览器版本的实现方式有所不同。

这两种集合类型不提供与元素、节点或类似类型相同的属性；这就是为什么阅读style off of document.getElements…(…)失败。 换句话说：NodeList or an HTMLCollection没有style;只有一个Element has a style.

这些“类似数组”的集合是包含零个或多个元素的列表，您需要对其进行迭代才能访问它们。 虽然您可以像数组一样迭代它们，但请注意，它们是不同的 https://stackoverflow.com/q/29707568 from Arrays https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array.

在现代浏览器中，您可以将这些可迭代对象转换为适当的数组Array.from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from;那么你可以使用forEach和别的数组方法，例如迭代法 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#instance_methods:

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

在不支持的旧浏览器中Array.from或迭代方法，您仍然可以使用Array.prototype.slice.call https://stackoverflow.com/q/7056925。 然后你可以像使用真正的数组一样迭代它：

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

您还可以迭代NodeList or HTMLCollection本身，但请注意，在大多数情况下，这些集合是live (MDN docs https://developer.mozilla.org/en-US/docs/Web/API/NodeList#live_vs._static_nodelists, DOM spec https://dom.spec.whatwg.org/#concept-collection-live)，即它们随着 DOM 的变化而更新。 因此，如果您在循环时插入或删除元素，请确保不会意外跳过一些元素 https://stackoverflow.com/q/15562484 or 创建无限循环 https://stackoverflow.com/q/9709351。 MDN 文档应始终注明方法返回实时集合还是静态集合。

例如，一个NodeList提供了一些迭代方法，例如forEach在现代浏览器中：

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

一个简单的for也可以使用循环：

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

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

Aside: .childNodes https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes产生一个live NodeList and .children https://developer.mozilla.org/en-US/docs/Web/API/Element/children产生一个live HTMLCollection，所以这两个吸气剂也需要小心处理。

有一些图书馆像jQuery https://jquery.com这使得 DOM 查询变得更短，并在“一个元素”和“元素集合”上创建了一个抽象层：

$(".myElement").css("size", "100px");