JavaScript

Web APIs

DOM

Es una de las APIs del BOM, y permite interactuar con el documento HTML cargado en la ventana actual del navegador. Utiliza una estructura jerárquica de nodos representando los elementos que componen el documento.

console.log('Elementos que hay dentro del elemento body:', document.body.children);

console.log('Elemento 1ro del body:', document.body.children[0]);

console.log('Tipo del 6to elemento del 1er elemento del body:', 
            document.body.children[0].children[5].nodeName);

console.log('HTML del anterior elemento:', 
            document.body.children[0].children[5].innerHTML);

❓ Ejercicio: En el siguiente Codepen, muestra el elemento del DOM del "Menú 2" usando una alerta e identifícalo en el siguiente diagrama.

Árbol DOM...
<body>
  <header><h1>Cabecera</h1></header>
  <nav>
    <ul>
      <li><a href="#">Menú 1</a></li>
      <!-- Muestra el hijo de este elemento de abajo --> 
      <li><a href="#">Menú 2</a></li>
    </ul>
  </nav>
  <footer><p>Pie de página</p></footer>
<body>
// Usa un alert para mostrar el HTML del elemento