Cómo usar esta herramienta para desarrolladores
- Pega un documento o fragmento HTML.
- Ajusta la profundidad y el máximo de nodos.
- Pulsa «Parsear HTML».
- Usa la salida JSON para inspección, depuración o procesamiento posterior.
HTML Parser
Analiza HTML con DOMParser y exporta una representación JSON del árbol de elementos, atributos y nodos de texto. Puedes limitar profundidad y número de nodos para inspeccionar documentos grandes sin generar una salida inmanejable; además resume encabezados y enlaces encontrados.
Datos de entrada
Texto o códigoEspacio publicitario
Qué hace esta herramienta para desarrolladores
Convierte el DOM parseado en datos estructurados para estudiar jerarquía, atributos y contenido sin ejecutar el código de la página.
El parser recorre documentElement de forma recursiva, conserva atributos, recorta texto largo y respeta límites configurables de profundidad y cantidad de nodos.
El árbol representa el DOM normalizado por el navegador, que puede diferir del orden exacto del texto fuente si el HTML estaba mal formado.
Ejemplo
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo</title>
</head>
<body>
<main>
<h1>Hola</h1>
<img src="foto.jpg" alt="Paisaje">
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Enlace</a>
</main>
</body>
</html>Casos de uso
- Entender cómo el navegador reconstruye HTML irregular.
- Extraer una estructura JSON para pruebas.
- Inspeccionar atributos y jerarquías de componentes renderizados como HTML.
Consejos para obtener resultados fiables
- Empieza con límites bajos en documentos muy grandes.
- No uses el árbol como prueba de conformidad del HTML original.
- Revisa si el contador alcanza el máximo configurado.
- Evita pegar información sensible si luego vas a compartir la salida JSON.
Detalles del procesamiento
Se usa DOMParser con el tipo text/html. El navegador aplica las reglas HTML5 de construcción del árbol y la herramienta serializa una vista limitada de ese resultado.
No ejecuta scripts, no carga recursos externos y no conserva posiciones exactas de línea/columna del código fuente.
Preguntas frecuentes
¿Qué diferencia hay entre parsear HTML y validarlo?
Parsear significa construir una estructura DOM a partir del texto; validar implica además comprobar reglas o requisitos del documento.
¿Por qué el DOM parseado puede ser distinto del HTML original?
El parser del navegador corrige ciertas estructuras inválidas y puede insertar o mover elementos para formar un árbol utilizable.
¿Cómo limito el tamaño del JSON al parsear un documento HTML grande?
Reduce la profundidad máxima o el número máximo de nodos con los controles antes de ejecutar el parser.
¿El HTML Parser ejecuta scripts encontrados en el documento?
No. DOMParser crea un documento para análisis; la herramienta no inserta ese HTML en la página ni ejecuta sus scripts.
¿Puedo usar la salida JSON para localizar atributos y encabezados?
Sí. El árbol incluye atributos y la salida añade resúmenes de encabezados y enlaces para facilitar búsquedas posteriores.
Herramientas relacionadas para desarrolladores
Módulos del análisis
| Módulo | Función |
|---|---|
| Árbol DOM | Serializa elementos, atributos y texto. |
| Límites | Controla profundidad y cantidad máxima de nodos. |
| Resumen | Extrae encabezados y destinos de enlaces. |