你的
getElementById 代码有效，因为ID必须是唯一的，因此该函数始终返回一个元素（如果未找到则返回
null）。
然而，方法
getElementsByClassName、
getElementsByName、
getElementsByTagName和
getElementsByTagNameNS返回一个可迭代的元素集合。
方法名称提供了提示：
getElement意味着
单数，而
getElements则意味着
复数。
方法querySelector也返回单个元素，而querySelectorAll返回可迭代集合。
可迭代集合可以是NodeList或HTMLCollection。
getElementsByName和querySelectorAll都指定返回NodeList；其他getElementsBy*方法指定返回HTMLCollection，但请注意一些浏览器版本实现方式不同。
这两种集合类型都没有Elements、Nodes或类似类型所提供的属性；这就是为什么从document.getElements…(…)读取style会失败。
换句话说：NodeList或HTMLCollection没有style；只有Element有style。
这些“类数组”集合是包含零个或多个元素的列表，您需要迭代它们以访问它们。
虽然您可以像迭代数组一样迭代它们，但请注意它们与
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文档应始终注明方法返回的是实时集合还是静态集合。
例如，在现代浏览器中，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 返回一个 实时 的 NodeList，而 .children 返回一个 实时 的 HTMLCollection，因此这两个获取器也需要小心处理。
有一些类库，比如jQuery，可以使DOM查询变得更短，并在“一个元素”和“一组元素”之间创建了一层抽象：
$(".myElement").css("size", "100px");
getElementsByClassName()暗示复数，而getElementById()暗示单个元素项。 - David Thomas