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 没有样式；只有 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");