Objeto NodeList en javascript

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 esto posible ya que a través de la notación de corchetes solo podemos acceder a las propiedades de un objeto, y como sé que no podemos tener

Answer 1

NodeLists "en vivo", es decir que se actualizan cuando la estructura del documento cambia de tal manera que siempre están al día 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.

En cualquier momento que desee repetir un NodeList, lo mejor es inicializar una segunda variable con la longitud y luego comparar el iterador a 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 matriz como la estructura, pero no es en realidad una matriz. Puede acceder a valores de matriz a través de la notación de corchetes.

Answer 2

NodeList no es un objeto JavaScript central, es provisto por 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 p. Ej.

// 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 3

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

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

Answer 4

JavaScript es comparable al alcohol, puede coaccionar:

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

Answer 5

Un NodeList es 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); 

Answer 6

Listas de nodos a menudo se implementan como iteradores nodo 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 y cuando la matriz no contiene cosas que son tratadas como falso booleano.

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 7

Ahora en ES2015 se puede hacer uso de Array.from método que crea una instancia de Array de cualquier objeto de matriz similar, por lo que este debe trabajar:

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