querySelectorAll和getElementsBy *方法返回什么？

Question

做getElementsByClassName（等类似的功能getElementsByTagName和querySelectorAll）的工作方式相同getElementById，还是他们返回元素的数组？

我问的原因是因为我试图改变所有元素的样式getElementsByClassName。见下文。

//doesn't work

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

//works

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

Answer 1

您的getElementById()代码有效，因为ID必须是唯一的，因此该函数始终只返回一个元素（或者null如果没有找到）。然而，getElementsByClassName()，querySelectorAll()，和其他getElementsBy*方法返回元件的阵列状的集合。像对待真正的数组一样迭代它：var elems = document.getElementsByClassName('myElement');for(var i = 0; i < elems.length; i++) {&nbsp; &nbsp; elems[i].style.size = '100px';}如果你喜欢更短的东西，可以考虑使用jQuery：$('.myElement').css('size', '100px');

Answer 2

以下描述取自此页面：getElementsByClassName（）方法返回具有指定类名的文档中所有元素的集合，作为NodeList对象。NodeList对象表示节点的集合。可以通过索引号访问节点。索引从0开始。提示：您可以使用NodeList对象的length属性来确定具有指定类名的元素数，然后您可以遍历所有元素并提取所需的信息。因此，作为参数getElementsByClassName将接受类名。如果这是您的HTML正文：<div&nbsp;id="first"&nbsp;class="menuItem"></div><div&nbsp;id="second"&nbsp;class="menuItem"></div><div&nbsp;id="third"&nbsp;class="menuItem"></div><div&nbsp;id="footer"></div>然后var menuItems = document.getElementsByClassName('menuItem')将返回3个上部<div>s&nbsp;的集合（不是数组），因为它们匹配给定的类名。然后，您可以使用以下命令迭代此节点（<div>在本例中为s）集合：for&nbsp;(var&nbsp;menuItemIndex&nbsp;=&nbsp;0&nbsp;;&nbsp;menuItems.length&nbsp;;&nbsp;menuItemIndex&nbsp;++)&nbsp;{ &nbsp;&nbsp;&nbsp;var&nbsp;currentMenuItem&nbsp;=&nbsp;menuItems[menuItemIndex]; &nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;stuff&nbsp;with&nbsp;currentMenuItem&nbsp;as&nbsp;a&nbsp;node.}有关元素和节点之间差异的更多信息，请参阅此帖子。