Was geben die Methoden querySelectorAll und getElementsBy* zurück?

Question

getElementsByClassName (und ähnliche Funktionen wie getElementsByTagName und querySelectorAll) funktioniert mit getElementById ist es genauso? Ein Array von Elementen zurückgeben?

Der Grund, warum ich frage, ist, dass ich versuche, den Stil aller Elemente mithilfe von getElementsByClassName zu ändern. siehe unten.

//funktioniert nicht
document.getElementsByClassName('myElement').style.size = '100px';

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

Answer 1

您使用数组作为对象，getElementbyId 和 getElementsByClassName 是：

• getElementbyId 将返回一个 Element 对象 如果没有找到具有该 ID 的元素，则返回 null
• getElementsByClassName 将返回实时 HTMLCollection，如果没有找到匹配元素，长度可能为 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将返回一个数组，并且该数组不具有样式 属性，您可以通过迭代来访问每个元素。

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

Answer 2

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

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

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

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

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

getElementsByName和 querySelectorAll 均指定返回 节点列表;其他 getElementsBy* 方法 指定返回 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 产生一个 live NodeList 和 .children 生成一个 live HTMLCollection，因此这两个 getter 也需要小心处理。

---

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

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