Ves al contingut principal

DOM Node vs DOM Element

Els conceptes de Node (Node DOM) i Element (Element DOM) són fonamentals per entendre com funciona l'estructura jeràrquica del DOM (Document Object Model) de JavaScript, tot i que sovint s'utilitzen indistintament. La diferència clau és que Node és el terme genèric i abstracte per a qualsevol cosa a l'arbre del DOM, mentre que Element és un tipus d'objecte Node molt específic i, sovint, el més important.

Node DOM (Elel ParePARE de Tots)tots)

Un Node és la classe base i l'objecte més genèric en la jerarquia del DOM. Qualsevol cosa en un document HTML o XML és, per definició, un node. Un node pot ser de diversos tipus.

Tipus de node comuns:

Tipus de Node Constant JavaScript Descripció Exemple en HTML
Element Node.ELEMENT_NODE (1) Representa una etiqueta HTML, com <div>, <p>, <img>. <p class="text">
Text Node.TEXT_NODE (3) Representa el contingut de text pur dins d'un element. El text dins del <p>.
Comment Node.COMMENT_NODE (8) Representa un comentari HTML. ``
Document Node.DOCUMENT_NODE (9) Representa el document sencer (l'objecte `document`). L'etiqueta `<html>` i tot el seu contingut.
Attribute `Node.ATTRIBUTE_NODE` (2) Representa un atribut de l'element (p. ex., `class`). `class="text"`

Propietats Clau d'un Node:

  • nodeType: Retorna el tipus de node com un número (vegeu la columna anterior).

  • nodeName: Retorna el nom del node (p. ex., '#text' per a un node de text, o el nom de l'etiqueta per a un element).

  • parentNode, childNodes: Propietats per navegar per l'arbre complet (inclou nodes de text i comentaris).

Element DOM 

Un Element és un subtipus de Node (el nodeType és 1). L'Element representa exclusivament les etiquetes HTML tal com es veuen en el codi font. Els Elements són els que tenen atributs HTML (com id, class, src, href) i l'estructura visual, per tant, tenen moltes més propietats i mètodes per a la manipulació.

 

Funcionalitats específiques d'un Element:

Característica Mètode / Propietat Específica d'Element Descripció
Contingut innerHTML, textContent Manipulació del contingut (HTML o text) dins de l'etiqueta.
Atributs getAttribute(), setAttribute() Mètodes dedicats exclusivament a la gestió dels atributs HTML.
Estils classList Conjunt de mètodes per manipular les classes CSS.
Navegació children, firstElementChild Propietats per navegar només entre els Elements fills (ignora nodes de text i comentaris, cosa que simplifica la navegació).

Exemple

Considerem el següent fragment d'HTML:

HTML 

<div id="contenidor">
    <!-- Comentari HTML -->
    Hola món
    <p>Alguna cosa més.</p>
</div>

Si seleccionem el div i mirem els seus fills:

JavaScript 

const contenidor = document.getElementById('contenidor');

// 1. Utilitzant NODES (childNodes)
console.log(contenidor.childNodes.length); 
/*
Llista de nodes (ordenats):
. #text (el salt de línia abans del comentari)
. #comment (el node del comentari)
. #text (el text "Hola món")
. <p> (El node d'ELEMENT)
. #text (el salt de línia després del </p>)
*/

// 2. Utilitzant ELEMENTS (children)
console.log(contenidor.children.length); // Resultat: 1
/*
Llista d'ELEMENTS:
1. <p> (Només l'etiqueta HTML)
*/

// 3. Exemple de mètodes:
// Element té:
contenidor.setAttribute('data-id', '123');
// Node de Text (el fill número 3) NO té 'setAttribute'.

 

Resum de la Diferència

Concepte Què Representa? Quin Tipus d'Objecte és?
Node Qualsevol cosa de la pàgina (etiqueta, text, comentari, document). El tipus d'objecte més abstracte.
Element Només una etiqueta HTML (<div>, <span>, <button>, etc.). Un tipus específic de Node, amb molts mètodes i propietats addicionals.

En el treball diari amb JavaScript, els desenvolupadors gairebé sempre volen treballar amb Elements (perquè són els que tenen styling i atributs). Per això, mètodes com querySelector() i propietats com children són tan populars, ja que estan dissenyats per retornar i manipular només els Elements i no tots els altres tipus de Nodes.

Amunt