Question

我在实验中使用了3种方法来返回数组中的每个HTML元素：

在我的HTML中，我有以下元素：

<section id="example">
  <div></div>
  <div></div>
  <div></div>
</section>

第一个例子：

var query = document.querySelector.bind(document);

query('#example').children.forEach(function(elem) {
  console.log(elem);
})

未捕获TypeError：query（...）。children.forEach不是函数

第二个例子：

var query = document.querySelector.bind(document);

[].forEach(query('#example').children, function(elem) {
  console.log(elem);
})

未捕获的TypeError：#<HTMLCollection>不是函数

第三个例子：

var query = document.querySelector.bind(document);

Array.prototype.forEach.call(query('#example').children, function(elem) {
  console.log(elem)
})

<div></div> {
{1}} {
{1}}

我的问题是，是什么让这三者在返回DOM元素方面彼此不同？我什么时候应该使用它们？

Answer 1

第一个例子：

元素的children属性为HTMLCollection，没有forEach方法。所以这个选项不起作用。

第二个例子：

[].forEach(query('#example').children, function(elem) {

这会尝试将子项HTMLCollection用作回调函数。它不是一个功能，所以这不起作用。

你可以这样做：

[].forEach.call(query('#example').children, function(elem) {

第三个例子：

Array.prototype.forEach.call大致相当于[].forEach.call方法，但它不会创建新的数组对象。这个会奏效。

另一种选择：

另一个稍微不同的选项是使用querySelectorAll，它会返回一个NodeList，它有一个forEach方法。

var queryAll = document.querySelectorAll.bind(document);

queryAll('#example > *').forEach(function(elem) {
  console.log(elem);
})

但是，forEach的{{1}}方法是一个新增功能，并且仍然缺乏浏览器支持。你可以填充它。

Answer 2

NodeList

<section>
  <div class="foo">Foo</div>
  <div class="foo">Foo</div>
  <div class="foo">Foo</div>
</section>