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 和 getElementsByClassName 是：

• getElementbyId 将返回一个 Element 对象< /a> 如果没有找到具有该 ID 的元素，则返回 null
• getElementsByClassName 将返回实时 HTMLCollection< /a>，如果没有找到匹配元素，长度可能为 0

getElementsByClassName

https://www.w3.org/ TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

获取ElementById

https://developer.mozilla.org/en- US/docs/Web/API/Document/getElementById

在您的代码中包含以下行：

将不按预期工作，因为getElementByClassName将返回一个数组，并且该数组不具有样式< /code> 属性，您可以通过迭代来访问每个元素。

这就是函数 getElementById 为您工作的原因，该函数将返回直接对象。因此，您将能够访问 style 属性。

Answer 2

您的getElementById 代码之所以有效，是因为 ID 必须是唯一的，因此该函数始终只返回一个元素（如果没有找到，则返回 null）。

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

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

方法querySelector 也返回单个元素，并且 querySelectorAll 返回一个可迭代的集合。

可迭代集合可以是 NodeList 或 HTMLCollection一个>.

getElementsByName和 querySelectorAll 均指定返回 节点列表;其他 getElementsBy* 方法 指定返回 < code>HTMLCollection，但请注意，某些浏览器版本的实现方式有所不同。

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

---

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

在现代浏览器中，您可以使用 Array.from;那么您可以使用 forEach 和其他 数组方法，例如迭代方法：

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 文档，DOM 规范)，即它们随着 DOM 的变化而更新。 因此，如果您在循环时插入或删除元素，请确保不会意外跳过某些元素或创建无限循环。 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< /a> 产生一个 live NodeList 和 .children 生成一个 live HTMLCollection，因此这两个 getter 也需要小心处理。

---

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

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