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