Seleccionar un elemento con JavaScript

Seleccionar un elemento con JavaScript

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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas