Prácticamente todos los navegadores actuales ya permiten el empleo de un conjunto de nuevos métodos que nos facilitan el acceso a objetos del DOM (solo el IE7 y anteriores no lo disponen)

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.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob1=document.querySelector("#boton1");
  ob1.addEventListener('click',presion,false);
}

function presion(e)
{
  var ob1=document.querySelector(".mensaje");
  ob1.style.backgroundColor='#ff0';
  var ob2=document.querySelector("#lista1");
  ob2.style.backgroundColor='#0ff';
}
</script>
</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">
</body>
</html>

Ver ejemplo anterior

El código javascript es:

window.addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var ob1=document.querySelector("#boton1");
  ob1.addEventListener('click',presion,false);
}

function presion(e)
{
  var ob1=document.querySelector(".mensaje");
  ob1.style.backgroundColor='#ff0';
  var 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 #:

  var ob1=document.querySelector("#boton1");

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:

  var 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 que definamos en nuestra página, por ejemplo:

#boton1
.mensaje
h1
div.mensaje
a:link

Crear una página que contenga dos títulos h1, dos párrafos y un botón. Cuando se presione el botón proceder a obtener la referencia del primer título y cambiar el color de letra, lo mismo hacer con el primer párrafo. Utilizar el método querySelector y pasar los nombres de los elementos HTML a recuperar.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
  var ob1=document.querySelector("#boton1");
  ob1.addEventListener('click',presion,false);
}
function presion(e)
{
  var ob1=document.querySelector("h1");
  ob1.style.backgroundColor='gold';
  var ob2=document.querySelector("p");
  ob2.style.backgroundColor='salmon';
}
</script>
</head>
<body>
  <h1>Titulo 1</h1>
  <p>Primer párrafo</p>
  <h1>Título 2</h1>
  <p>Segundo párrafo</p>
  <input type="button" value="Cambiar" id="boton1">
</body>
</html>

Ver ejemplo anterior

(adsbygoogle = window.adsbygoogle || []).push({});

Accediendo a un elemento HTML a través de un selector CSS (querySelector)