querySelectorAll 和 getElementsBy* 方法返回什么？

getElementsByClassName（等类似的功能getElementsByTagName和querySelectorAll）的工作一样getElementById，还是他们返回元素的数组？

我问的原因是因为我试图使用getElementsByClassName. 见下文。

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

getElementById代码可以工作，因为 ID 必须是唯一的，因此该函数始终只返回一个元素（或者null如果没有找到）。

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

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

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

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

getElementsByName和querySelectorAll都被指定返回一个NodeList; 其他getElementsBy*方法被指定为返回一个HTMLCollection，但请注意，某些浏览器版本以不同的方式实现这一点。

这两种集合类型都没有提供元素、节点或类似类型所提供的相同属性；这就是为什么读style的关document.getElements... (...)失败。换句话说： aNodeList或 anHTMLCollection没有style; 只有一个Element有一个style。

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

在现代浏览器中，您可以使用以下命令将这些可迭代对象转换为适当的数组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 文档应始终注意方法是返回实时集合还是静态集合。

例如，aNodeList提供了一些迭代方法，例如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";
}

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

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10705