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

但是，方法 、、、 getElementsByClassName和 返回
元素的可迭代集合。getElementsByNamegetElementsByTagNamegetElementsByTagNameNS

方法名称提供了提示：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";
}

您也可以迭代NodeListorHTMLCollection本身，但请注意，在大多数情况下，这些集合是 实时 的（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";
}

另外：.childNodesyield a live
NodeList和.childrenyield a live HTMLCollection，所以这两个 getter
也需要小心处理。

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

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