querySelectorAll和getElementsBy *方法返回什么？

Question

做getElementsByClassName（等类似的功能getElementsByTagName和querySelectorAll）的工作方式相同getElementById，还是他们返回元素的数组？我问的原因是因为我试图改变所有元素的样式getElementsByClassName。见下文。//doesn't workdocument.getElementsByClassName('myElement').style.size = '100px';//worksdocument.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++) {

    elems[i].style.size = '100px';

}

如果你喜欢更短的东西，可以考虑使用jQuery：

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

Answer 2

以下描述取自此页面：

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>

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

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

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

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