querySelectorAll，getElementsByClassName和其他getElementsBy *方法返回什么？

getElementsByClassName （和类似的函数，如getElementsByTagName和querySelectorAll ）与getElementById一样工作，还是返回元素数组？

我问的原因是因为我试图改变使用getElementsByClassName所有元素的风格。 见下文。 

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

您的getElementById()代码可以工作，因为ID必须是唯一的，因此函数总是只返回一个元素（如果没有find，则返回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');

你正在使用一个数组作为对象， getElementbyId和getElementsByClassName的区别在于：

  • getElementbyId将返回一个对象。
  • getElementsByClassName将返回一个数组。

getElementsByClassName方法

getElementsByClassName(classNames)方法接受一个string，该string包含一组无符号空格分隔的令牌，代表类。 当被调用时，方法必须返回一个活动的NodeList对象，该对象包含文档中具有该参数中指定的所有类的所有元素，并通过在空格上拆分string来获得类。 如果在参数中没有指定令牌，那么该方法必须返回一个空的NodeList。

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

的getElementById

getElementById（）方法访问具有指定id的第一个元素。

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

在你的代码行中：

1- document.getElementsByClassName（'myElement'）。style.size ='100px';

将不会按预期工作，因为getElementByClassName将返回一个数组，并且该数组不会有style属性，您将通过迭代访问每个element 。

这就是为什么函数getElementById为你工作，这个函数将返回你的直接对象，所以你将能够访问style属性。

以下描述摘自本页 ：

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>的集合（不是数组），因为它们与给定的类名匹配。

然后你可以迭代这个节点（在这种情况下是<div> s）集合： 

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

有关元素和节点之间的差异，请参阅此文章 。

ES6提供了Array.from()方法，它可以从一个类似数组或者可迭代的对象中创build一个新的数组实例。 

 let boxes = document.getElementsByClassName('box'); Array.from(boxes).forEach(v => v.style.background = 'green'); console.log(Array.from(boxes)); 
 .box { width: 50px; height: 50px; margin: 5px; background: blue; display: inline-block; } 
 <div class='box'></div> <div class='box'></div> <div class='box'></div> <div class='box'></div>

它返回类似数组的列表。

以数组为例， 

 var el = getElementsByClassName("elem"); el = Array.prototype.slice.call(el); //this line el[0].appendChild(otherElem);

你可以运行一个单一的元素 

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

但它将用于.myElement类的第一个元素。

如果你想申请这个与class的所有元素，我build议你使用 

 document.querySelectorAll('.myElement').forEach(function(element) { element.style.size = '100px'; });

换一种说法

  • document.querySelector()只select指定select器的第一个元素。 所以它不吐出一个数组，它是一个单一的值。 与document.getElementById()类似，但它只会获取ID元素，因为ID必须是唯一的。

  • document.querySelectorAll()select具有指定select器的所有元素，并将它们返回到一个数组中。 与document.getElementsByClassName()类似，只能读取类和document.getElementsByTagName()标签。

为什么使用querySelector？

它仅用于简单和简洁的唯一目的。

为什么使用getElement / sBy？*

它有更快的performance。

为什么这种性能差异？

这两种select方式都会创build一个NodeList供进一步使用。 querySelectors获取一个静态NodeList，因此它必须从头开始创build。
getElement / sBy *立即获取当前DOM的现有活动NodeList。

那么，何时使用哪种方法取决于您。

相关信息

所有方法的演示
NodeList文档
性能testing

随着ES5 +（任何浏览现在 – 2017）你应该能够做到 

 [].forEach.call(document.getElementsByClassName('answer'), function(el) { el.style.color= 'red'; });
Interesting Posts