forEach method of Node.childNodes?

Question

After providing an incorrect answer concerning the .item() property of Node.childNodes for a question, I inspected __proto__ of the returned childNodes of a form element and found a forEach method.

The forEach method of Node.childNodes is not documented in the specification of NodeList, in Methods at MDN, or Interface NodeList, and does not appear to be mentioned in Iterate a NodeList using forEach method or pages linked to that Question; though it appears available in Chromium 50.

Is the method available only at relatively recent versions of Chrome / Chromium? If yes, is this documented?

Is there any documentation concerning the forEach() method of Node.childNodes?

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();
  var form = e.target;
  form.childNodes.forEach(function(el) {
    if (el.tagName === "INPUT" && el.type !== "submit")
      snippet.log("name:" + el.name + ", value:" + el.value)
  });
});

<form>
  <input type="text" name="firstName" value="The first name">
  <input type="text" name="lastName" value="The last name">
  <input type="email" name="emailAddress" value="email@example.com">
  <br>
  <input type="submit" value="Submit">
</form>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

score 9 · Accepted Answer · answered Mar 20 '16 at 00:02

DOM4 now defines NodeList as an iterable:

iterable<Node>;

According to the IDL draft, that means

An interface can be declared to be iterable by using an iterable declaration (matching Iterable) in the body of the interface.
iterable<value-type>;
iterable<key-type, value-type>;
Objects implementing an interface that is declared to be iterable support being iterated over to obtain a sequence of values.

Note: In the ECMAScript language binding, an interface that is iterable will have “entries”, “forEach”, “keys”, “values” and @@iterator properties on its interface prototype object.

If a single type parameter is given, then the interface has a value iterator and provides values of the specified type.

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

Is the method available only at relatively recent versions of Chrome / Chromium? If yes, is this documented?

Yes, this is new in DOM4, so not widely available.

Is there any documentation concerning the forEach() method of Node.childNodes?

See Add support for [ArrayClass] and use that on NodeList on the Chromium bug tracker:

From https://bugs.webkit.org/show_bug.cgi?id=81573

http://dom.spec.whatwg.org/#interface-nodelist

DOM4 specs NodeList as having Array.prototype in its prototype chain.

Some more background for this one. [ArrayClass] allows us to do things like document.querySelectorAll('.foo').forEach etc. The patch at bugs.webkit.org has a runtime flag because it is unclear if this will still be possible to achieve.

Historically these array-like objects did not include these methods from the array prototype, leading to code like Array.prototype.forEach.call(nodeList, function() { ... }). This is now meant to change in DOM4.

forEach method of Node.childNodes?

2 Answers2

Linked

Related