Podemos identificar elementos mediante estos tres métodos:

  • getElementsByTagsName()
  • getElementById()
  • (NEW) getElementsByClassName()

Identificar etiquetas por un único elemento

Podemos hacer trabajar Javascript de la siguiente manera, veamos el archivo HTML con el código que necesita.

<!DOCTYPE html>
<html lang="es">
<head>
    <script src="ejm02.js"></script>
</head>
<body>
    <p id="importante">Esto es una prueba</p>
    <p>Esto es otra prueba</p>
</body>
</html>

Ahora incluímos el código del archivo Javascript

function ejecuta(){
    document.getElementById("importante").onclick=saludo;
}
function saludo(){
    alert("Hola, esto son pruebas");
    alert("Poco a poco");
}
window.onload=ejecuta;

Este ejm lo que va a hacer es que cuando pinchemos en el primer párrafo (el que tiene el id único), va a hacer saltar un alert con el valor que le hayamos incluído dentro del mismo.

Identificar etiquetas por varios elementos

Veamos un ejm, incluimos la sintaxis del código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <script src="ejm02.js"></script>
</head>
<body>
    <p>Esto es una prueba</p>
    <p>Esto es otra prueba</p>
</body>
</html>

Ahora incluímos el código del archivo Javascript

function ejecuta(){
    for(var i=0;i<3;i++)
        {
            document.getElementsByTagName("p")[i].onclick=saludo;
        }
}
function saludo(){
    alert("Hola, esto son pruebas");
}
window.onload=ejecuta;

Estamos utilizando un bucle for que recorra todos los elementos <p> de nuestro documento HTML, para que, cuando se haga clic en cualquiera de los mismos, nos salte el alert de la función saludo() incluída en nuestro archivo Javascript

getElementsByClassName()

Este es un nuevo elemento incluído en HTML5, el cual permite trabajar con aquellos elementos que tengan el atributo class incluído, ya no es únicamente un sólo elemento, se puede trabajar con varios. Veamos un ejm.

Primero escribimos el código del archivo HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <script src="ejm02.js"></script>
    <style>
        .importante {
            color:red;
        }
    </style>
</head>
<body>
    <p class="importante">Esto es una prueba</p>
    <p>Esto es otra prueba</p>
    <p class="importante">Esto es otr prueba mas</p>
</body>
</html>

Ahora el código de nuestro archivo Javascript

function ejecuta(){
    for(var i=0;i<3;i++){
        var z = document.getElementsByClassName("importante")[i].onclick=saludo;
    }    
}
function saludo(){
    alert("Hola, esto son pruebas");
}
window.onload=ejecuta;

Mediante el bucle for avanzaremos por todos los elementos que contengan class="importante".

Nuevos métodos Javascript

Los dos métodos nuevos que se han incorporado son:

  • querySelector(): retorna el primer elemento que corresponde al grupo de selectores indicado entre paréntesis
  • querySelectorAll(): retorna todos los elementos que corresponden al grupo de selectores indicado entre paréntesis. El valor devuelto es un Array conteniendo los elementos en el mismo orden en el que aparecen en el documento

querySelector()

Lo vamos a ver con un ejm

Escribimos el código de nuestro archivo HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <script src="ejm02.js"></script>
    <style>
        .importante {
            color:red;
        }
    </style>
</head>
<body>
    <div id="principal">
        <p class="importante">Esto es una prueba</p>
        <p>Esto es otra prueba</p>
        <p class="importante">Esto es otr prueba mas</p>
        <p>Esta es la última prueba</p>
    </div>
</body>
</html>

Y ahora utilizamos querySelector() para apuntar el último elemento hijo del elemento padre con el id=principal

function ejecuta(){
    document.querySelector("#principal p:last-child").onclick=saludo;
}
function saludo(){
    alert("Hola, esto parece que funciona");
}
window.onload=ejecuta;

Lo que hará será que ejecutará la función saludo en el último elemento del elemento padre con id=principal.

querySelectorAll()

Veamos como utilizar querySelectorAll() en nuestros archivos mediante un ejm.

Escribimos el código de nuestro archivo HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <script src="ejm02.js"></script>
    <style>
        .importante {
            color:red;
        }
    </style>
</head>
<body>
    <div id="principal">
        <p class="importante">Esto es una prueba</p>
        <p>Esto es otra prueba</p>
        <p class="importante">Esto es otr prueba mas</p>
    </div>
    <p>Este no se va a ver</p>
    <p>Esta es la última prueba</p>
</body>
</html>

Ahora escribimos el código de nuestro archivo Javascript

function ejecutar(){
    var elementos=document.querySelectorAll("#principal p");
    for(var i=0;i<elementos.length;i++){
    elementos[i].onclick=saludo;
    }
}
function saludo(){
    alert("Hola");
}
window.onload=ejecutar;

Lo que hacemos es crear una variable elementos que va a apuntar a los elementos <p> de la clase principal, después, con un bucle for y la propiedad length hacemos un bucle para que todos los elementos incluídos hagan lo que les pide la función saludo.  De esta manera, la función saludo va a afectar a todos los elementos p de la clase principal.

Veamos otro ejm para ver la potencia que tienen estos selectores.

<!DOCTYPE html>
<html lang="es">
<head>
    <script src="ejm02.js"></script>
    <style>
        .importante {
            color:red;
        }
    </style>
</head>
<body>
    <div id="principal">
        <p class="importante">Esto es una prueba</p>
        <p>Esto es otra prueba</p>
        <p class="importante">Esto es otr prueba mas</p>
    </div>
    <p>Este no se va a ver</p>
    <p>Esta es la <span>última</span> prueba</p>
</body>
</html>

Veamos el código Javascript ahora.

function ejecutar(){
    var elementos=document.querySelectorAll("#principal p, span");
    for(var i=0;i<elementos.length;i++){
    elementos[i].onclick=saludo;
    }
}
function saludo(){
    alert("Hola");
}
window.onload=ejecutar;