Lista de nodos de JavaScript
- Introducción a los nodos HTML DOM
-
Objeto JavaScript
NodeList -
Objetos
NodeListestáticos vs vivos -
Operaciones sobre el objeto
NodeList
HTML DOM significa Document Object Model, que es una interfaz para documentos HTML. Trata cada página web o documento como una estructura de árbol que consta de una colección de nodos.
En palabras simples, un nodo es un objeto del documento web. Estos nodos se colocan en un documento DOM jerárquicamente.
Además, pueden tener nodos primarios y secundarios.
Introducción a los nodos HTML DOM
Supongamos que tenemos una página HTML, como se muestra a continuación.
<!DOCTYPE html>
<html>
<head>
<!-- This is the page head -->
<title>DOM Node Example</title>
</head>
<body>
<!-- This is the page body -->
<h2>DOM Node Demo</h2>
<p id="body-content">This article is about DOM NodeList.</p>
</body>
</html>
El navegador interpreta la página HTML anterior como una estructura de árbol. Por lo tanto, podría parecerse a lo siguiente.
|-doctype: html
|-HTML
-|HEAD
-|TITLE
-|text: DOM Node Example
-|BODY
-|comment: This is the page body
-|H2
-|text: DOM Node Demo
-|P id="body-content"
-|text: This article is about DOM NodeList.
Cada etiqueta HTML es un nodo DOM, pero los nodos no se limitan a las etiquetas HTML. Incluso los textos y comentarios HTML se consideran nodos DOM.
Por lo tanto, los nodos y elementos HTML son dos cosas diferentes donde los elementos HTML son un subtipo de nodos DOM.
Objeto JavaScript NodeList
Como sugiere el nombre, un objeto NodeList es una colección de nodos DOM. Es muy similar al objeto HTMLCollection con pequeñas diferencias; como el objeto HTMLCollection se puede acceder con el nombre y la ID, pero los objetos NodeList solo admiten el acceso basado en índice.
Además, la HTMLCollection contiene solo los nodos de tipo Node.ELEMENT_NODE. Los objetos NodeList pueden contener diferentes tipos de nodos, como nodos de atributos, nodos de texto y nodos de comentarios, incluidos los nodos de elementos.
Hay dos tipos de objetos NodeList, en vivo y estáticos, que se discutirán en la siguiente sección.
Objetos NodeList estáticos vs vivos
La propiedad childNodes en el objeto document devuelve un objeto NodeList que llamamos como una NodeList en vivo. Porque este objeto se ve afectado por las modificaciones del DOM automáticamente.
Usemos la consola del navegador para acceder al documento HTML mencionado anteriormente usando JavaScript, como se muestra a continuación.
const bodyContent = document.getElementById('body-content');
var nodeListForBody = bodyContent.childNodes;
console.log(nodeListForBody);
Producción:
Como era de esperar, el objeto NodeList ha sido devuelto por la propiedad childNodes. Comprobemos la longitud del objeto nodeListForBody.
console.log(nodeListForBody.length);
Producción:
Agreguemos un nuevo elemento secundario al elemento de párrafo, como se muestra a continuación.
bodyContent.appendChild(document.createElement('div'));
Luego, verificaremos la longitud de la NodeList nodeListForBody como se muestra a continuación.
console.log(nodeListForBody.length);
Producción:
Dado que la modificación del DOM ha cambiado la longitud de nodeListForBody, es un objeto NodeList vivo.
A diferencia de los objetos NodeList en vivo, los NodeList estáticos no se ven afectados por las modificaciones del DOM. Normalmente, el método document.querySelectorAll() devuelve un objeto NodeList estático.
Operaciones sobre el objeto NodeList
Una NodeList no es una matriz. Podemos hacer un bucle de una NodeList por su índice, que es similar a una matriz de JavaScript, pero no admite ninguna de las operaciones de matriz como pop(), push() y join().
Accedemos al primer nodo de la anterior NodeList: nodeListForBody por su índice 0.
console.log(nodeListForBody[0]);
Producción:
Una Lista de nodos puede convertirse fácilmente en una matriz típica de JavaScript utilizando el método Array.from().
const nodeListAsArray = Array.from(nodeListForBody)
console.log(nodeListAsArray);
Producción:
Como era de esperar, la anterior NodeList nodeListForBody se ha convertido en una matriz nodeListAsArray.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.