Node.childNodes 的 forEach 方法?

IT技术 javascript google-chrome dom chromium nodelist
2021-02-20 20:06:39

在为问题提供关于.item()属性的错误答案Node.childNodes,我检查元素__proto__的返回并找到了一个方法。childNodesformforEach

所述forEach的方法Node.childNodes中的说明书中未记录NodeListMethods在MDN,或接口节点列表中所提到的那样,并没有出现迭代使用的forEach方法的节点列表或页面链接到该问题; 尽管它似乎在 Chromium 50 中可用。

该方法是否仅适用于相对较新版本的 Chrome / Chromium?如果是,是否记录在案?

有没有关于forEach()方法的文档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>

2个回答

DOM4 现在将NodeList定义为可迭代的:

iterable<Node>;

根据IDL 草案,这意味着

接口可以被宣布为可迭代通过使用 迭代声明(匹配Iterable在接口的主体)。

iterable<value-type>;
iterable<key-type, value-type>;

实现声明为可迭代的接口的对象支持迭代以获得一系列值。

注意:在 ECMAScript 语言绑定中,可迭代的接口将在其接口原型对象具有“entries”、“forEach”、“keys”、“values”和 @@iterator属性

如果给出单个类型参数,则接口具有值迭代器并提供指定类型的值。

该方法是否仅适用于相对较新版本的 Chrome / Chromium?如果是,是否记录在案?

是的,这是 DOM4 中的新功能,因此没有广泛使用。

有没有关于 Node.childNodes 的 forEach() 方法的文档?

请参阅添加对 [ArrayClass] 的支持并在 Chromium 错误跟踪器的NodeList使用它

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

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

DOM4 将 NodeList 规范为在其原型链中具有 Array.prototype。

关于这一点的更多背景。[ArrayClass] 允许我们做类似 document.querySelectorAll('.foo').forEach 等的事情。bugs.webkit.org 的补丁有一个运行时标志,因为不清楚这是否仍然可以实现。

从历史上看,这些类似数组的对象不包括来自数组原型的这些方法,导致了类似Array.prototype.forEach.call(nodeList, function() { ... }). 现在这意味着要在 DOM4 中进行更改。