Todos los navegadores actuales ya permiten el empleo de un conjunto de nuevos métodos que nos facilitan el acceso a objetos del DOM
El primero de estos es el método querySelector que le pasamos como referencia un selector CSS (Cascade Style Sheet) y nos retorna el primer nodo que cumple dicha regla.
Plantear una página que contenga un párrafo, una lista ordenada y un botón. Al presionar el botón proceder a cambiar el color del párrafo accediendo a la clase que pertenece. Lo mismo hacer con la lista pero accediendo por medio de su id.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<p class="mensaje">Esto es un mensaje</p>
<ol id="lista1">
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
</ol>
<input type="button" value="Cambiar" id="boton1">
<p class="mensaje">Esto es otro mensaje</p>
<script src="funciones.js"></script>
</body>
</html>
funciones.js
document.querySelector("#boton1").addEventListener('click', () => {
let ob1 = document.querySelector(".mensaje")
ob1.style.backgroundColor = '#ff0'
let ob2 = document.querySelector("#lista1")
ob2.style.backgroundColor = '#0ff'
})
Para recuperar la referencia del botón debemos llamar al método querySelector y pasar el nombre del id antecediendo el caracter #:
document.querySelector("#boton1").addEventListener('click', () => {
Hasta aquí el método querySelector funciona en forma idéntica al método clásico getElementById.
Cuando queremos acceder al párrafo que no tiene id pero tiene definida la clase mensaje podemos acceder por medio de la sintaxis:
let ob1 = document.querySelector(".mensaje")
ob1.style.backgroundColor = '#ff0'
Es muy importante tener en cuenta que cuando le pasamos un nombre de clase al método querySelector nos devuelve el primer objeto de la página que define dicha clase.
Podemos pasar como parámetro al método querySelector cualquier selector CSS o nombre de elemento HTML que definamos en nuestra página, por ejemplo:
#boton1 .mensaje h1 div.mensaje a:link