querySelectorAll 和 getElementsBy* 方法返回什么？

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

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

方法名称提供提示：暗示单数，而暗示复数。getElementgetElements

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

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

getElementsByName 和 querySelectorAll 都指定为返回 ;其他 getElementsBy* 方法指定为返回 ，但请注意，某些浏览器版本以不同的方式实现此目的。NodeListHTMLCollection

这两种集合类型都不提供与元素、节点或类似类型相同的属性。这就是为什么读出...失败。换句话说：a 或 an 没有 ;只有 有 .styledocument.getElements()NodeListHTMLCollectionstyleElementstyle

这些“类似数组”的集合是包含零个或多个元素的列表，您需要循环访问这些元素才能访问它们。虽然您可以像数组一样循环访问它们，但请注意，它们与 Arrays 不同。

在现代浏览器中，您可以将这些可迭代对象转换为具有Array.from的正确数组;然后你可以使用和其他 Array 方法，例如迭代方法：forEach

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

在不支持或迭代方法的旧浏览器中，您仍然可以使用Array.prototype.slice.call。然后，您可以像使用真实数组一样对其进行迭代：Array.from

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

您也可以迭代 or 本身，但请注意，在大多数情况下，这些集合是实时的（MDN 文档，DOM 规范），即它们会随着 DOM 的更改而更新。因此，如果在循环时插入或删除元素，请确保不会意外跳过某些元素或创建无限循环。MDN文档应始终注意方法返回的是实时集合还是静态集合。NodeListHTMLCollection

例如，a 提供了一些迭代方法，例如在现代浏览器中：NodeListforEach

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，.children 产生 live，所以这两个 getter 也需要小心处理。NodeListHTMLCollection

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

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

您正在使用数组作为对象，和 之间的区别在于：getElementbyIdgetElementsByClassName

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

getElementsByClassName

The method takes a string that contains an unordered set of unique space-separated tokens representing classes. When called, the method must return a live object containing all the elements in the document that have all the classes specified in that argument, having obtained the classes by splitting a string on spaces. If there are no tokens specified in the argument, then the method must return an empty NodeList.getElementsByClassName(classNames)NodeList

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

getElementById

The getElementById() method accesses the first element with the specified id.

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

in your code the lines:

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

will NOT work as expected, because the will return an array, and the array will NOT have the property, you can access each by iterating through them.getElementByClassNamestyleelement

That's why the function worked for you, this function will return the direct object. Therefore you will be able to access the property.getElementByIdstyle