javascript - funciona - ¿Cuándo es NodeList en vivo y cuándo es estático?

nodelist javascript

Question

De MDN para NodeList :

En algunos casos, la NodeList es una colección en vivo, lo que significa que los cambios en el DOM se reflejan en la colección. Por ejemplo, Node.childNodes está en vivo:

 var parent = document.getElementById(''parent'');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let''s assume "2"
parent.appendChild(document.createElement(''div''));
console.log(child_nodes.length); // should output "3"

En otros casos, la NodeList es una colección estática, lo que significa que cualquier cambio posterior en el DOM no afecta el contenido de la colección. document.querySelectorAll devuelve una NodeList estática.

Entonces ... ¡un poco molesto! ¿Hay alguna referencia central para qué métodos devuelven listas en vivo y cuáles devuelven listas estáticas, sin tener que verificar individualmente todas las diversas partes de la API DOM? ¿Hay alguna regla en el trabajo aquí?

Answer 1

La información sobre cada método detalla si es en vivo o no, pero no parece haber una convención estándar para determinarlo.

document.getElementsByClassName() es una HTMLCollection y está HTMLCollection .

document.getElementsByTagName() es una HTMLCollection y está HTMLCollection .

document.getElementsByName() es una NodeList y está NodeList .

document.querySelectorAll() es una NodeList y no está NodeList .

HTMLCollection siempre están en vivo.

Una HTMLCollection es una lista de nodos. Se puede acceder a un nodo individual mediante el índice ordinal o el name del nodo o los atributos de id .

Nota: Se supone que las colecciones en HTML DOM son en vivo, lo que significa que se actualizan automáticamente cuando se cambia el documento subyacente.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506

Un objeto NodeList es una colección de nodos ... La interfaz NodeList proporciona la abstracción de una colección ordenada de nodos, sin definir ni limitar cómo se implementa esta colección. Los objetos NodeList en el DOM son en vivo.

http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live

Por lo tanto, tanto HTMLCollection s como NodeList s son colecciones. Una HTMLCollection es siempre una representación en vivo de la presencia de su Element en el DOM, mientras que una NodeList es una construcción más genérica con los Node que pueden o no estar en el DOM.

Una colección es un objeto que representa una lista de nodos DOM. Una colección puede ser en vivo o estática. A menos que se indique lo contrario, una colección debe estar en vivo.

http://www.w3.org/TR/2012/WD-dom-20120405/#collections

Entonces, para resumir:

• Las colecciones pueden estar en HTML DOM (en vivo) o no (estáticas)
• .querySelectorAll() devuelve una NodeList que es estática, lo que significa que
• .querySelectorAll() devuelve una colección que no está en el DOM

Tenga en cuenta que "no estar en el DOM" no significa que los elementos dentro de las colecciones estáticas se eliminen, separen, oculten o sean inaccesibles. Todo lo que significa es que la colección está fijada a lo que coincida con el selector en el momento en que la inicia.

Bueno, aquí hay un método para determinar si una colección está en vivo. Agrega un clon de un miembro de la colección (para que coincida con el selector) a su padre, verifica si la longitud cambió y luego lo elimina para que la página no se vea afectada.

function isLive(collection) {
if (collection.length < 1) {
return undefined; //inconclusivw
}
let body = document.getElementsByTagName(''body'')[0];
let l1 = collection.length;
let clone = collection.item(0).cloneNode();
clone.style.display = "none";
body.appendChild(clone);
let l2 = collection.length;
body.removeChild(clone);
return l2 !== l1;
}
divs1 = document.getElementsByClassName(''c'');
console.log("document.getElementsByClassName(''c''):",divs1.toString()); //"[object HTMLCollection]"
divs2 = document.querySelectorAll(''.c'');
console.log("document.querySelectorAll(''.c''): ",divs2.toString()); //"[object NodeList]"
divs3 = document.getElementsByName(''mydiv'');
console.log("document.getElementsByName(''mydiv''): ",divs3.toString()); //"[object NodeList"]
console.log("isLive(divs1)",isLive(divs1)); //true
console.log("isLive(divs2)",isLive(divs2)); //false
console.log("isLive(divs3)",isLive(divs3)); //true

<html>
<body>
<div class="c" name="mydiv">C1</div>
<div class="c" name="mydiv">C2</div>
</body>
</html>

Answer 2

No sé si hay una referencia central, pero estos son los métodos que conozco que devuelven HTMLCollection y NodeList vivo:

• .getElementsByClassName
• .getElementsByTagName
• .getElementsByTagNameNS
• .getElementsByName
• .childnodes
• .children