Question

您好我试图访问所选元素的子节点，但浏览器告诉我该对象没有foreach函数。我应该怎样做才能访问子元素。我不想使用jquery而是想使用native，用于实验目的。

这是我的代码：

var el = document.querySelector('ol');
el.children.forEach(function(childEl) {
  console.log(childEl);
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <ol contenteditable oninput="">
    <li>press enter</li>
  </ol>
</body>

</html>

Answer 1

Node.children是dom collection，不是真正的数组，因此它没有像forEach这样的数组方法（也需要修复案例）。

因此，一种常用的解决方案是使用上下文作为html集合来调用数组方法

＆＃13;

var el = document.querySelector('ol');
[].forEach.call(el.children, function(childEl) {
  console.log(childEl);
})

＆＃13;

  <ol contenteditable oninput="">
    <li>press enter</li>
  </ol>

＆＃13;

另一种方法（类似）是首先将集合转换为数组（使用Array.slice（））然后在其上调用数组方法

＆＃13;

var el = document.querySelector('ol'),
  array = [].slice.call(el.children);
array.forEach(function(childEl) {
  console.log(childEl);
})

＆＃13;

<ol contenteditable oninput="">
  <li>press enter</li>
</ol>

＆＃13;

Javascript对象forEach不是一个函数

1 个答案: