Elementos vs nodos en JavaScript
La interfaz Node del DOM es una clase abstracta sobre la cual muchos objetos DOM se basan...
Table of contents
##Introducción
Cuando empezamos a trabajar con la manipulación del DOM, una de las cosas que más confunden es qué es un elemento y qué es un nodo. Dado que alguna de los métodos usados como getElementsByClassName o querySelectorAll nos devuelven cosas diferentes como lista de elementos (HTMLCollection) o lista de nodos (NodeList).
Un concepto importante a la hora de hablar de Elementos y Nodos es el concepto de herencia.
Sabemos que la estructura del DOM está organizada de forma jerárquica en nodos.
La interfaz Node del DOM es una clase abstracta sobre la cual muchos objetos DOM se basan, lo que permite que estos objetos sean tratados de manera similar, heredando los mismos métodos y propiedades.
Una interfaz es una colección de propiedades y métodos. Por lo que cuando creamos un objeto/nodo de tipo Elemento, este hereda métodos y propiedades de la interfaz Node aparte de tener sus propios métodos y propiedades.
La jierarquia de herencia lo que nos dice la diferencia entre uno y otro.
Qué son los nodos
Nodo es cualquier objeto formado apartir de un elemento html,texto o comentario y que existe dentro de la hierarquia del DOM. Se dividen en diferentes tipos y cada uno, aparte de heredar la interfaz de su padre según su tipo de nodo, almacena sus propios métodos y propiedades(sub-interfaz). Esencialmente, cualquier cosa dentro del documento HTML es un nodo.
Algunos ejemplos de tipos de nodo son:
- Element node (hereda la interfaz de Node)
- Text node (hereda la interfaz de CharacterData)
- Comment node (hereda la interfaz de CharacterData)
- Document node (hereda la interfaz de Node)
Qué son los elementos
Un objeto de tipo Element, como hemos visto arriba, es un tipo específico de nodo. Objetos de este tipo representan elementos HTML, como <div>,<span>,<body>. No incluyen texto,comentarios etc...
En general son objetos DOM que representan etiquetas HTML.
