Seleccionar un elemento con JavaScript
En el siguiente tutorial aprenderemos cómo utilizar los selecores de JavaScript para seleccionar elementos del DOM.
Después de que la página se cargue por completo es posible acceder a cada uno de sus elementos o nodos utilizando selectores. En el siguinte tutorial aprenderemos qué tipo de selectores hay en el lenguaje JavaScript y poner algunos ejemplos.
Seleccionar elementos por su id
document.getElementById
La función getElementById es la más utilizada. Se utiliza para acceder directamente a un único elemento del DOM usando como identificador su id (los ids no se pueden repetir).
Sintaxis
// Accedemos directamente al elemento deseado por su id única
var elem = document.getElementById("id_del_elemento");
La función devuelve el elemento cuyo atributo id coincide con el parámetro utilizado
Ejemplo
<section>
<p id="titulo1">Titulo de la primera sección</p>
</section>
<section>
<p id="titulo2">Título de la segunda sección</p>
</section>
<script>
// Seleccionamos el elemento con id titulo1
var titulo1 = document.getElementById("titulo1");
// Seleccionamos el elemento con id titulo2
var titulo2 = document.getElementById("titulo2");
</script>
Seleccionar elementos por su atributo name
document.getElementsByName
La función getElementsByName nos permite seleccionar todos los elementos que tienen un atributo name concreto.
Sintaxis
// Obtenemos un array de elementos con esa atributo name
var elem = document.getElementsByName("name_del_elemento");
La función devuelve un array de elementos con el atributo name que pasamos por parámetro.
Ejemplo
<section id="personalidad-legal">
<input type="radio" id="fisica" name="legal" value="Persona física" checked>
<input type="radio" id="juridica" name="legal" value="Persona jurídica">
</section>
<script>
// Seleccioamos los elementos con name legal
var elems = document.getElementsByName("legal");
// Ahora podremos saber cuál está seleccionado
for(var i=0; i<elems.length; i++){
if(elems[i].checked){
document.write("El elemento seleccionado es " + elems[i].value);
}
}
</script>
Seleccionar elementos por su clase
document.getElementsByClassName
La función getElementsByClassName obtiene todos los elementos que tienen la clase que pasamos por parámetro.
Sintaxis
// Obtenemos un array de elementos con esa misma clase
var elem = document.getElementsByClassName("clase_del_elemento");
Ejemplo
<section>
<p class="titulo">Titulo de la primera sección</p>
</section>
<section>
<p class="titulo">Título de la segunda sección</p>
</section>
<script>
// Seleccionamos el elementos con la clase titulo
var titulos = document.getElementsByClassName("titulo");
</script>
Seleccionar elementos por su etiqueta
document.getElementsByTagName
La función getElementsByTagName obtiene todos los elementos que tienen la misma etiqueta que le pasamos por parámetro.
Sintaxis
// Obtenemos un array de elementos con esa misma etiqueta
var elem = document.getElementsByTagName("etiqueta_del_elemento");
La función devuelve un array de elementos que tienen la misma etiqueta. Este array lo podremos recorre con un bucle e incluso podemos usar el selector de manera recursiva en cada uno de los elementos del array para acceder a sus hijos
Ejemplo
<section>
<p>Titulo de la primera sección</p>
</section>
<section>
<p>Título de la segunda sección</p>
</section>
<script>
// Seleccionamos todos las etiquetas section
var secciones = document.getElementsByTagName("section");
// Recorremos la lista
for(var i=0; i<secciones.length; i++){
// Seleccionamos la etiqueta p de la sección actual
var parrafo = secciones[i].getElementsByTagName("p");
}
</script>
Más ejemplos
<!-- Código Html -->
<div id="contenido">
<p class="titulo">Título del primer libro</p>
<p class="resumen">Resumen primer del libro</p>
<p class="titulo">Titulo del segundo libro</p>
<p class="resumen">Resumen del segundo libro</p>
</div>
<!--Código javasCript-->
<script>
// Seleccionamos el elemento con id contenido
var contenido = document.getElementById("contenido");
// Seleccionamos los elementos de clase titulo
var titulos = document.getElementsByClassName("titulo");
alert(titulos[0]);
// Muestra "Titulo del primer libro" alert(titulos[1]);
// Muestra "Titulo del segundo libro" // Seleccionamos los parrafos
var parrafos = document.getElementsByTagName("p");
alert(parrafos[0]);
// Muestra "Titulo del primer libro"
alert(parrafos[1]);
// Muestra "Resumen del primer libro" alert(parrafos[2]);
// Muestra "Titulo del segundo libro" alert(parrafos[3]);
// Muestra "Resumen del primer libro"
</script>