Javascript Object forEach is not a function

Question

Hi Im trying to access the child nodes of a selected element, but the browser tells me that that object doesn't have a foreach function. What should I do for me to access the child elements. I dont want to use jquery instead I want to use native, for experiment purpose.

here is my code:

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>

foreach is not valid function, use forEach Capital E, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Tushar
– Tushar, Commented Jul 21, 2015 at 8:35

Arun P Johny · Accepted Answer · 2015-07-21 08:41:33Z

5

Node.children is dom collection, not an real array so it doesn't have array methods like forEach(need to fix the case also).

So one commonly used solution is to call the array methods with the context as the html collection

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

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

Another way(similar) is to convert the collection to an array first(using Array.slice()) then call array methods on it

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

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

edited Jul 21, 2015 at 8:41

answered Jul 21, 2015 at 8:36

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript Object forEach is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related