javascript - querySelectorAll 和 getElementsBy* 方法返回什么？

Question

getElementsByClassName(以及 getElementsByTagName 和 querySelectorAll 等类似函数)与 getElementById 的工作方式相同吗？返回一个元素数组？

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

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

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

Answer 1

您的 getElementById 代码可以正常工作，因为 ID 必须是唯一的，因此该函数始终只返回一个元素(如果没有找到，则返回 null)。

但是，这些方法 getElementsByClassName , getElementsByName , getElementsByTagName 和 getElementsByTagNameNS 返回一个可迭代的元素集合。

方法名称提供了提示:getElement 暗示单数，而getElements 暗示复数。

方法 querySelector 也返回单个元素，而 querySelectorAll 返回可迭代集合。

可迭代集合可以是 NodeList 或 HTMLCollection 。

getElementsByName和querySelectorAll都指定返回一个NodeList；另一个 getElementsBy* methods 指定返回 HTMLCollection，但请注意，某些浏览器版本的实现方式有所不同。

这两种集合类型不提供与元素、节点或类似类型相同的属性；这就是为什么从 document.getElements…(…) 读取 style 失败的原因。 换句话说:NodeList 或 HTMLCollection 没有 style；只有 Element 具有 style。

<小时/>

这些“类似数组”的集合是包含零个或多个元素的列表，您需要对其进行迭代才能访问它们。 虽然您可以像数组一样迭代它们，但请注意它们是 different 和 Arrays 。

在现代浏览器中，您可以使用 Array.from 将这些可迭代对象转换为适当的数组；那么你可以使用 forEach 和其他 Array methods, e.g. iteration methods :

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

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

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

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

您还可以迭代 NodeList 或 HTMLCollection 本身，但请注意，在大多数情况下，这些集合是事件的( MDN docs ， DOM spec )，即它们随着 DOM 的变化而更新。 因此，如果您在循环时插入或删除元素，请确保不会意外出现 skip over some elements 或 create an infinite loop 。 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";
}

旁白:.childNodes 产生一个live NodeList，.children 产生一个live HTMLCollection，所以这两个 getter 也需要谨慎处理。

<小时/>

有一些库，例如 jQuery，它们使 DOM 查询变得更短，并在“一个元素”和“元素集合”上创建一个抽象层:

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