CodeAventura
JavaScript en el DOM
▸Fundamentos del DOM▸Diferencia entre nodos y elementos

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nodos vs elementos</title>
  </head>
  <body>
    <ul id="lista-frutas"><li>Manzana</li><!-- separador --><li>Banana</li><li>Mango</li></ul>
    <p id="resumen-nodos">childNodes: pendiente</p>
    <p id="resumen-elementos">children: pendiente</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
02 / 16Diferencia entre nodos y elementos
Anterior

Diferencia entre nodos y elementos

Error común al empezar

Mucha gente cree que “nodo” y “elemento” son lo mismo. Se parecen, pero no son equivalentes.

  • Un elemento es una etiqueta HTML (<div>, <p>, <li>, etc.)
  • Un nodo es una categoría más amplia: incluye elementos, texto, comentarios, etc.

Por eso este detalle cambia cómo recorres el DOM.

childNodes vs children

Cuando usas una lista como <ul>:

  • ul.childNodes devuelve todos los nodos hijos (incluyendo textos por saltos de línea)
  • ul.children devuelve solo elementos HTML

Dado este HTML:

childNodes contará más nodos de los que esperas: los <li>, el comentario y posibles nodos de texto. children solo contará los tres <li>.

Por qué te debe importar

Si quieres contar elementos visuales, usar childNodes puede confundirte, porque verás nodos de texto que no esperabas.

Regla práctica:

  • usa children para manipulación de interfaz
  • usa childNodes cuando realmente necesites analizar todos los nodos

Señal de código profesional

Saber cuándo usar cada uno evita bugs típicos como:

  • contar elementos de más
  • iterar nodos de texto sin querer
  • romper lógica al insertar espacios o saltos de línea en HTML

Tu desafío 🚀

  1. Selecciona #lista-frutas
  2. Usa .childNodes.length y muéstralo en #resumen-nodos con textContent
  3. Usa .children.length y muéstralo en #resumen-elementos con textContent

Los dos números serán distintos. Observa la diferencia y entenderás por qué importa.

Ver la diferencia en pantalla te ahorra horas de confusión después.