getElementsByClassName
(以及类似的函数,如 getElementsByTagName
和 querySelectorAll
)是否与 getElementById
一样工作?返回一个元素数组?
我问的原因是因为我正在尝试使用 getElementsByClassName
更改所有元素的样式。见下文。
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
最佳答案
您的 getElementById
代码有效,因为 ID 必须是唯一的,因此该函数始终只返回一个元素(如果未找到,则返回 null
)。
但是,方法
getElementsByClassName
,
getElementsByName
,
getElementsByTagName
和
getElementsByTagNameNS
返回可迭代的元素集合。
方法名称提供了提示:getElement
表示单数,而getElements
表示复数。
方法 querySelector
也返回单个元素,querySelectorAll
返回一个可迭代的集合。
可迭代集合可以是 NodeList
或 HTMLCollection
。
getElementsByName
和querySelectorAll
都指定返回一个NodeList
;其他 getElementsBy*
methods 被指定返回一个 HTMLCollection
,但请注意,某些浏览器版本以不同方式实现这一点。
这两种集合类型所提供的属性与元素、节点或类似类型所提供的属性不同;这就是为什么从 document.getElements
...(
...)
中读取 style
失败的原因。
换句话说:NodeList
或 HTMLCollection
没有样式
;只有 Element
有 style
。
这些“类数组”集合是包含零个或多个元素的列表,您需要迭代这些元素才能访问它们。
虽然您可以像数组一样遍历它们,但请注意它们是 different 从 Array
s 开始。
在现代浏览器中,您可以使用 Array.from
将这些可迭代对象转换为适当的数组;然后你可以使用 forEach
和其他 Array methods, e.g. iteration methods :
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 docs, DOM spec ),即它们随着 DOM 的变化而更新。
因此,如果您在循环时插入或删除元素,请确保不要意外地插入 skip over some elements 或 create an infinite loop 。
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
产生一个live NodeList
,.children
产生一个live HTMLCollection
,所以这两个 getter 也需要小心处理。
有一些像 jQuery 这样的库可以让 DOM 查询更短一些,并在“一个元素”和“元素集合”上创建一个抽象层:
$(".myElement").css("size", "100px");
关于javascript - querySelectorAll 和 getElementsBy* 方法返回什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55574922/