querySelectorAll 和 getElementsBy* 方法返回什么? [英] What do querySelectorAll and getElementsBy* methods return?

问题描述

getElementsByClassName(以及类似的函数，如 getElementsByTagName 和 querySelectorAll)是否与 getElementById 工作相同或它们返回一个元素数组?

我问的原因是因为我试图使用 getElementsByClassName 更改所有元素的样式.见下文.

//不起作用document.getElementsByClassName('myElement').style.size = '100px';//作品document.getElementById('myIdElement').style.size = '100px';

解决方案

您的 getElementById 代码有效，因为 ID 必须是唯一的，因此该函数总是只返回一个元素(如果没有找到，则返回 null).>

然而，方法getElementsByClassName,getElementsByName,getElementsByTagName，以及getElementsByTagNameNS返回一个可迭代的元素集合.

方法名称提供了提示:getElement 暗示 单数，而 getElements 暗示 复数.

方法querySelector 也返回单个元素，querySelectorAll 返回一个可迭代的集合.

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

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

这两种集合类型都没有提供元素、节点或类似类型所提供的相同属性；这就是为什么从 document.getElements...(...) 中读取 style 失败的原因.换句话说:NodeList 或 HTMLCollection 没有 style；只有 Element 有 style.

---

这些类似数组"的集合是包含零个或多个元素的列表，您需要迭代这些元素才能访问它们.虽然您可以像数组一样迭代它们，但请注意它们与 不同"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" rel="noreferrer">Arrays.

在现代浏览器中，您可以使用 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 

您还可以迭代 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 

---

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

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

Do getElementsByClassName (and similar functions like getElementsByTagName and querySelectorAll) work the same as getElementById or do they return an array of elements?

The reason I ask is because I am trying to change the style of all elements using getElementsByClassName. See below.

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

//works
document.getElementById('myIdElement').style.size = '100px';

解决方案

Your getElementById code works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found).

However, the methods getElementsByClassName, getElementsByName, getElementsByTagName, and getElementsByTagNameNS return an iterable collection of elements.

The method names provide the hint: getElement implies singular, whereas getElements implies plural.

The method querySelector also returns a single element, and querySelectorAll returns an iterable collection.

The iterable collection can either be a NodeList or an HTMLCollection.

getElementsByName and querySelectorAll are both specified to return a NodeList; the other getElementsBy* methods are specified to return an HTMLCollection, but please note that some browser versions implement this differently.

Both of these collection types don’t offer the same properties that Elements, Nodes, or similar types offer; that’s why reading style off of document.getElements…(…) fails. In other words: a NodeList or an HTMLCollection doesn’t have a style; only an Element has a style.

---

These "array-like" collections are lists that contain zero or more elements, which you need to iterate over, in order to access them. While you can iterate over them similarly to an array, note that they are different from Arrays.

In modern browsers, you can convert these iterables to a proper Array with Array.from; then you can use forEach and other Array methods, e.g. iteration methods:

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

In old browsers that don’t support Array.from or the iteration methods, you can still use Array.prototype.slice.call. Then you can iterate over it like you would with a real array:

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

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

You can also iterate over the NodeList or HTMLCollection itself, but be aware that in most circumstances, these collections are live (MDN docs, DOM spec), i.e. they are updated as the DOM changes. So if you insert or remove elements as you loop, make sure to not accidentally skip over some elements or create an infinite loop. MDN documentation should always note if a method returns a live collection or a static one.

For example, a NodeList offers some iteration methods such as forEach in modern browsers:

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

A simple for loop can also be used:

var elements = document.getElementsByClassName("myElement");

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

---

There are some libraries like jQuery which make DOM querying a bit shorter and create a layer of abstraction over "one element" and "a collection of elements":

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

这篇关于querySelectorAll 和 getElementsBy* 方法返回什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！