javascript - tools - inspector google chrome

¿Para cada método de Node.childNodes?

Question

Después de proporcionar una respuesta incorrecta con respecto a la propiedad .item() de Node.childNodes para una pregunta, inspeccioné __proto__ de los childNodes devueltos de un elemento de form y encontré un método forEach .

El método forEach de Node.childNodes no está documentado en la especificación de NodeList , Node.childNodes o Interface NodeList , y no parece mencionarse en Iterate a NodeList usando el método forEach o las páginas vinculadas a esa pregunta; aunque parece estar disponible en Chromium 50.

¿El método está disponible solo en versiones relativamente recientes de Chrome / Chromium? En caso afirmativo, ¿está documentado?

¿Existe alguna documentación sobre el método forEach() de 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 protected]">
  <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>

Answer 1

¿El método está disponible solo en versiones relativamente recientes de Chrome / Chromium? En caso afirmativo, ¿está documentado?

Sí, esto es nuevo en DOM4, por lo que no está ampliamente disponible.

¿Existe alguna documentación sobre el método forEach () de Node.childNodes?

Consulte Agregar soporte para [ArrayClass] y usarlo en NodeList en el rastreador de errores de Chromium:

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

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

DOM4 especifica NodeList como teniendo Array.prototype en su cadena de prototipos.

Un poco más de antecedentes para este. [ArrayClass] nos permite hacer cosas como document.querySelectorAll (''. Foo''). ForEach etc. El parche en bugs.webkit.org tiene un indicador de tiempo de ejecución porque no está claro si aún será posible lograrlo.

Históricamente, estos objetos tipo matriz no incluían estos métodos del prototipo de matriz, lo que condujo a un código como Array.prototype.forEach.call(nodeList, function() { ... }) . Esto ahora está destinado a cambiar en DOM4.

Answer 2

DOM4 ahora define NodeList como un iterable:

iterable<Node>;

Según el borrador de IDL , eso significa

Se puede declarar que una interface es iterable mediante el uso de una declaración iterable (coincidente Iterable ) en el cuerpo de la interfaz.

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

Los objetos que implementan una interfaz que se declara como soporte iterable se repiten para obtener una secuencia de valores.

Nota : en el enlace del lenguaje ECMAScript, una interfaz que sea iterable tendrá "entradas", "para cada", "claves", "valores" y propiedades de @@iterator en su objeto prototipo de interfaz .

Si se proporciona un parámetro de tipo único, la interfaz tiene un iterador de valores y proporciona valores del tipo especificado.