JavaScript

Web APIs

DOM

Selectores

Para obtener un elemento o lista de elementos concreta del DOM. Pega el siguiente código en la consola JavaScript del navegador y observa el comportamiento.

console.log('Obtiene el elemento con id "sidebar":', 
            document.getElementById('sidebar'));
            
console.log('Obtiene los elementos cuya etiqueta es "button":', 
            document.getElementsByTagName('button'));

console.log('Obtiene el 1er elemento que satisface el selector CSS pasado:',
            document.querySelector('*[title]'));

console.log('Obtiene todos los elementos que satisfacen el selector CSS pasado:',
            document.querySelectorAll('.header'));

❓ Ejercicio: En el siguiente Codepen, obtén el elemento con id "pie", los elementos li, los enlaces cuya URL sea "#" y los elementos que tenga la clase "prueba".

<body>
<header><h1>Cabecera</h1></header>
<nav>
  <ul>
    <li><a href="#">Menú 1</a></li>
    <li><a href="#">Menú 2</a></li>
  </ul>
</nav>
<footer><p id="pie">Pie de página</p></footer>
<body>
// Elemento id "pie"
// Elementos "li"
// Enlaces a "#"
// Elementos con clase "prueba"