Seleccionar un elemento con JavaScript
En este tutorial aprenderemos los diferentes métodos para seleccionar un elemento del DOM con JavaScript.
Seleccionar un elemento
En JavaScript podemos seleccionar un elemento de varias formas:
- Por su Id
<script>
//Accedemos directamente al elemento deseado por su id única
var elem = document.getElementById("id_del_elemento");
</script>
- Por su Clase
<script>
//Obtenemos un array de elementos con esa misma clase
var elem = document.getElementsByClassName("clase_del_elemento");
</script>
- Por su etiqueta
<script>
//Obtenemos un array de elementos con esa misma etiqueta
var elem = document.getElementsByTagName("etiqueta_del_elemento");
</script>
Veamos unos 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>
<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>
Si te ha gustado no olvides compartir en redes sociales.
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo