Visualizador del Árbol DOM
Visualizador del árbol DOM en línea y gratuito. Pega HTML y observa cómo el navegador lo analiza en nodos element, text y comment, incluidos los nodos de texto en blanco que casi todos pasan por alto.
Visualizador del Árbol DOM
Visualizador del árbol DOM en línea y gratuito. Pega HTML y observa cómo el navegador lo analiza en nodos element, text y comment, incluidos los nodos de texto en blanco que casi todos pasan por alto.
Acerca del árbol DOM
Qué es el DOM
Cuando el navegador carga una página, analiza tu HTML en un árbol de nodos llamado DOM (Document Object Model). Cada etiqueta se convierte en un nodo element, el texto entre etiquetas en nodos text y los comentarios en nodos comment. Luego JavaScript lee y cambia la página recorriendo y editando este árbol, no la cadena HTML original.
Una cadena frente a un árbol
El HTML que escribes es solo una secuencia de caracteres. El navegador lo convierte en un árbol estructurado y, de paso, crea nodos que no escribiste a propósito: los saltos de línea y la sangría entre etiquetas se convierten en nodos de texto en blanco. Verlos explica por qué childNodes suele contener más de lo que esperas.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Cuál es la diferencia entre childNodes y children?
children solo enumera nodos element; childNodes también incluye nodos text (incluido el espacio en blanco) y nodos comment. Por eso childNodes.length suele ser mayor. Esta herramienta muestra cada tipo de nodo para que la diferencia sea evidente.
¿Por qué hay tantos nodos de espacio en blanco?
Los saltos de línea y la sangría que añades para que el HTML sea legible se convierten en nodos text en el DOM. Son nodos reales que pueden afectar la maquetación y el recorrido del DOM. El HTML minificado tiene muchos menos.
¿Mi HTML se envía a algún servidor?
No. El análisis se ejecuta por completo en tu navegador con el DOMParser integrado y nada de lo que pegas sale de tu dispositivo.