返回数组中的每个 DOM 元素答案

【问题标题】：returning each DOM elements in an array返回数组中的每个 DOM 元素
【发布时间】：2017-05-11 04:15:06
【问题描述】：

我在实验中使用了 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);
})

未捕获的类型错误：#<HTMLCollection> 不是函数

第三个例子：

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

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

<div></div>
<div></div>
<div></div>

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

【问题讨论】：

【解决方案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);
})

但是，NodeList 的forEach 方法是一个较新的添加，仍然缺乏浏览器支持。不过你可以 polyfill 它。

【讨论】：

【解决方案2】：

你应该使用querySelectorAll。

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

var section = document.querySelector('section');
section.querySelectorAll('.foo').forEach(function(e) {
    console.log(e);
})

【讨论】：