read - Objeto NodeList en javascript

javascript xml getelementsbytagname

Question

¿Alguien puede decirme qué tipo de objeto es NodeList? Leí que es un objeto similar a un array y que se puede acceder a través de la notación de corchetes, por ejemplo var a = someNode.childNode[0]; . Cómo es posible, ya que a través de la notación de corchetes solo podemos acceder a las propiedades de un objeto, y como sé, no podemos tener

Answer 1

Ahora en ES2015 puedes hacer uso del método Array.from que crea una instancia de Array desde cualquier objeto tipo array, así que esto debería funcionar:

const divList = Array.from( document.getElementsByTagName("div") );

Para más información: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Answer 2

JavaScript es como el alcohol, puede coaccionar:

var links = document.getElementsByTagName(''a'');
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) {
  anchor.addEventListener(''click'', onClickFN, false);
});

Answer 3

Las listas de nodos a menudo se implementan como iteradores de nodos con un filtro. Esto significa que obtener una propiedad como la longitud es O(n) e iterar sobre la lista volviendo a verificar la longitud será O (n ^ 2).

var paragraphs = document.getElementsByTagName(''p'');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

Es mejor hacer esto en su lugar:

var paragraphs = document.getElementsByTagName(''p'');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
   doSomething(paragraph);
} 

Esto funciona bien para todas las colecciones y matrices, siempre que la matriz no contenga elementos que se consideren como booleanos falsos.

En los casos en los que itera sobre los nodos secundarios, también puede usar las propiedades firstChild y nextSibling.

var parentNode = document.getElementById(''foo'');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}

Answer 4

NodeList no es un objeto JavaScript central, sino que lo proporciona el navegador con el DOM. Piense en una función que devuelve una interfaz a un objeto dinámico o en vivo, por lo que paraEach () no está disponible, pero puede convertirlo en una matriz real para tener una instantánea con, por ejemplo,

// turns nodelist into an array to enable forEach
function toArray(list) {
  var i, array = [];
  for  (i=0; i<list.length;i++) {array[i] = list[i];}
  return array;
}

Detalles: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

Answer 5

NodeLists "en vivo", es decir, que se actualizan cuando la estructura del documento cambia de modo que estén siempre actualizados con la información más precisa. En realidad, todos los objetos NodeList son consultas que se ejecutan contra el DOM cada vez que se accede a ellos.

Cada vez que desee iterar sobre una NodeList, lo mejor es inicializar una segunda variable con la longitud y luego comparar el iterador con esa variable:

var divs = document.getElementsByTagName("div");

for (var i=0, lens=divs.length; i  <  len; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
} 

NodeList es una estructura tipo array pero en realidad no es una matriz. Puede acceder a valores de matriz a través de la notación de corchetes.

Answer 6

Un NodeList es una colección de DOM elements . Es como una matriz (pero no lo es). Para trabajar con él, debes convertirlo en una matriz de JavaScript normal. El siguiente fragmento puede hacer el trabajo por usted.

const nodeList = document.getElementsByClassName(''.yourClass''),
      nodeArray = [].slice.call(nodeList);

ACTUALIZAR:

// newer syntax
const nodeList = Array.from(document.querySelectorAll(''[selector]''))

// or
const nodeList = [...document.querySelectorAll(''[selector]'')]

Answer 7

NodeList es un objeto host y no está sujeto a las reglas habituales que se aplican a los objetos JavaScript nativos. Como tal, debe apegarse a la API documentada para ello, que consiste en una propiedad de length y acceso a sus miembros a través de la sintaxis de acceso a la propiedad de corchetes. Puede usar esta API para crear una Array contenga una instantánea de los miembros de NodeList:

var nodeList = document.getElementsByTagName("div");
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}