Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles
Seleccionar un elemento con JavaScript

Seleccionar un elemento con JavaScript

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>

Más tutoriales de JavaScript

Deja 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 »
A %d blogueros les gusta esto: