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

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

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

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

可迭代集合可以是 aNodeList或 an 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");

您使用的阵列为对象，之间的差getElementbyId和 getElementsByClassName是：

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

getElementsByClassName

该getElementsByClassName(classNames)方法采用一个字符串，该字符串包含一组无序的、以空格分隔的唯一标记表示类。调用时，该方法必须返回一个NodeList包含文档中所有元素的活动 对象，这些元素具有该参数中指定的所有类，通过在空格上拆分字符串获得类。如果参数中没有指定令牌，则该方法必须返回一个空的 NodeList。

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

getElementById

getElementById() 方法访问具有指定 id 的第一个元素。

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

在您的代码中：

1- document.getElementsByClassName('myElement').style.size = '100px';

将不会按预期工作，因为getElementByClassName将返回一个数组，而该数组将不具有该style属性，您可以element通过遍历它们来访问每个。

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

ES6提供了Array.from()方法，该方法从类数组或可迭代对象创建一个新的 Array 实例。

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

正如您在代码片段中看到的那样，在使用Array.from()函数之后，您就可以对每个元素进行操作。

使用相同的解决方案jQuery。

$('.box').css({'background':'green'});

.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

以下描述取自此页面：

getElementsByClassName() 方法返回文档中具有指定类名的所有元素的集合，作为 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始。

提示：您可以使用 NodeList 对象的 length 属性来确定具有指定类名的元素的数量，然后您可以遍历所有元素并提取所需的信息。

因此，作为参数getElementsByClassName将接受类名。

如果这是您的 HTML 正文：

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

thenvar menuItems = document.getElementsByClassName('menuItem')将返回 3 个 upper<div>的集合（不是数组），因为它们与给定的类名匹配。

然后，您可以使用以下命令迭代此节点（<div>在本例中为 s）集合：

for (var menuItemIndex = 0 ; menuItemIndex < menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

有关元素和节点之间差异的更多信息，请参阅此帖子。

换句话说

• document.querySelector()只选择指定选择器的第一个元素。所以它不会吐出一个数组，它是一个单一的值。类似于document.getElementById()只获取 ID 元素，因为 ID 必须是唯一的。

• document.querySelectorAll()选择具有指定选择器的所有元素并在数组中返回它们。类似于仅document.getElementsByClassName()用于类和document.getElementsByTagName()标签。

为什么要使用 querySelector？

它仅用于简单和简洁的唯一目的。

为什么要使用 getElement/sBy？*

更快的性能。

为什么会有这种性能差异？

两种选择方式的目的都是创建一个NodeList以供进一步使用。 querySelectors生成一个带有选择器的静态 NodeList，因此它必须首先从头开始创建。
getElement/sBy*立即适应当前 DOM 的现有活动 NodeList。

因此，何时使用哪种方法取决于您/您的项目/您的设备。

资讯

所有方法的演示
NodeList 文档
性能测试