Question

为了获得匹配的元素＆amp;循环，我正在使用querySelectorAll＆amp; forEach数组方法。根据{{3}}，querySelectorAll将返回nodelist。

我也可以通过获取匹配的元素来使用getElementsByClassName，但不能直接使用forEach。但是this链接告诉我们它还返回一个nodelist对象

在forEach返回时使用getElementsByClassName会引发错误，forEach is not a function

您能告诉我为什么forEach在getElementsByClassName＆amp;返回时getElementsByClassName无法直接返回querySelectorAll。 nodelist为select customers.customerId, items.itemName, sum(orders.quantity) as boughtTotal from customers join orders on customers.customerId = orders.customerId join items on items.itemId = orders.itemId group by customers.customerId, items.itemName order by boughtTotal desc;

Answer 1

document.querySelectorAll会返回NodeList而不是Array。永远不要害怕，等等！

您可以使用Function.prototype.call更改Array.prototype.forEach功能的上下文。

＆＃13;

var nodes = document.querySelectorAll('span');
var colors = ['red', 'orange', 'gold', 'lawngreen', 'dodgerblue', 'deepskyblue', 'blueviolet'];

Array.prototype.forEach.call(nodes, function(elem, idx) {
  // do something
  elem.style.color = colors[idx];
});

＆＃13;

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>

＆＃13;

修改

实际上我怀疑forEach不能直接用于返回document.getElementsByClassName

这是因为document.getElementsByClassName会使HTMLCollection而不是Array。 HTMLCollection在其原型上没有forEach方法。

＆＃13;
＆＃13;
var nodes = document.getElementsByTagName('span'); console.log(nodes.constructor.name); //=> HTMLCollection
＆＃13;
<span>A</span>
＆＃13;
＆＃13;
＆＃13;

Answer 2

从我测试的内容：

<ul>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
    <li class="test"></li>
</ul>
<script type="text/javascript">
    var elementList = document.querySelectorAll("li");
    console.log(elementList.constructor);
    var elementList2 = document.getElementsByClassName("test");
    console.log(elementList2);
    console.log(elementList2.constructor);
</script>

querySelectorAll返回：

NodeList() { [native code] }

而getElementsByClassName返回：

HTMLCollection() { [native code] }

与前面的回答一样，HTML集合无法访问forEach方法。

EDIT1：Difference between HTMLCollection, NodeLists, and arrays of objects似乎回答了一些差异！

EDIT2：您似乎可以使用此处提到的ES6技术迭代HTML集合：For loop for HTMLCollection elements

Answer 3

我们可以通过许多其他方式与HTML集合进行交互，就好像它是一个数组一样。我们可以使用索引号访问数据。它看起来像一个数组。但是它的功能有些不同。首先，有一点区别。我听说nodeList和HTMLCollection可以互换使用。它们都是DOM列表，但是唯一的真正区别是HTMLCollection更具体。它包含相同的DOM元素，而nodeList可以包含各种DOM元素。这就是为什么querySelectorAll返回nodeList但getElementsByTagName返回HTMLCollection的原因。有趣的是，forEach可以在nodeList上工作，而不能在HTMLCollection上工作。

现在有多种方法可以遍历HTMLCollection；

var p = document.getElementsByTagName("p") for(var i = 0; i < p.length; i++) { console.log(p)} 在此处https://medium.com/@larry.sassainsworth/iterating-over-an-html-collection-in-javascript-5071f58fad6b

为什么forEach数组方法不是循环遍历document.getElementsByClassName的函数

3 个答案: