Objetivo: Leer la estructura de nodos del documento HTML e indicar, por cada nodo que se encuentre, el nombre, el tipo, su valor y el nodo contenedor.
Explicación: Para recorrer la estructura de nodos del DOM, se utiliza una función recursiva (línea 18). La función recursiva es llamada en la línea 30, proporcionándole el nodo body del documento como parámetro inicial .
Instrucciones:
- Copia el código en un fichero de texto y guárdalo con extensión *.html.
- Abre la página web resultante en el navegador
- Despliega la "Consola de Desarrollador" del navegador y observa los resultados.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lectura de Nodos de un documento HTML</title>
</head>
<body>
<p>Este es un texto</p>
<div>
<p>Párrafo 1 dentro de DIV</p>
<!-- este es un comentario -->
</div>
<p>Es es un segundo párrafo <span class="importante">que será leído</span></p>
<script>
function recursividad(nodo){
var arrayNodos = nodo.childNodes;
arrayNodos.forEach(element =>{
console.log("=========================");
console.log("El nodo "+ element.nodeName + " es de tipo : ("+ element.nodeType + ") y su valor es: "+ element.nodeValue);
console.log("Nodo Padre: "+ element.parentNode);
});
if(element.hasChildNodes){
recursividad(element);
}
}
recursividad(document.body);
</script>
</body>
</html>