DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
27-08-2013

Muchas veces usamos jQuery por facilidad a la hora de seleccionar elementos del DOM, y poder trabajar con ellos. Pero, podemos acceder a los mismos elementos de formas similares con puro JavaScript; utilizando los Selectores getElementById, getElementsByTagNames y getElementsByClassName además de los muy poco conocidos querySelector y querySelectorAll.

¿Para qué sirve y cómo usar querySelector?

Si hemos trabajado con los selectores en CSS; entonces nos resultará muy fácil trabajar con este selector de JavaScript, ya que nos permite obtener los elementos usando la misma sintaxis que aplicamos cuando creamos nuestras reglas en CSS; con querySelector podemos obtener el primer elemento del DOM que haga match con lo que le pasamos. Funciona exactamente igual que los selectores de jQuery.

Ejemplo del uso del querySelector

<ul id="ejemplo1"> 
  <li class="uno" id="uno"> uno </li> 
  <li class="dos" id="dos"> dos </li> 
  <li class="tres" id="tres"> tres </li> 
  <li class="cuatro" id="cuatro"> cuatro </li> 
</ul> 
document.querySelector('#ejemplo1 li'); 
// nos trae <li class="uno" id="uno"> uno </li>
document.querySelector('#ejemplo1 .uno'); 
//nos trae <li class="uno" id="uno" > uno </li>
document.querySelector('#ejemplo1 #dos.dos'); 
//nos trae <li class="dos" id="dos" > dos </li>
document.querySelector('#ejemplo1 > #dos.dos');
//nos trae <li class="dos" id="dos" > dos </li>

¿Para qué sirve y cómo usar querySelectorAll?

querySelectorAll funciona de la misma manera que el selector anterior (querySelector), pero nos trae todos los elementos que coincidan con la condición dada, en vez de solo el primero elemento; dicha colección de elementos será representada en un array.

Ejemplo de uso del querySelectorAll

<ul id="ejemplo2"> 
  <li class="uno" id="uno" > uno </li> 
  <li class="dos" id="dos" > dos </li> 
  <li class="tres" id="tres" > tres </li> 
  <li class="cuatro" id="cuatro" > cuatro </li> 
</ul> 
document.querySelectorAll('#ejemplo2 li'); 
/*
  nos trae un array con los elementos que cumplan la condición anterior
[
<li class="uno" id="uno"> uno </li>, 
<li class="dos" id="dos"> dos </li>, 
<li class="tres" id="tres"> tres </li>, 
<li class="cuatro" id="cuatro"> cuatro </li>
]

*/

¿Para qué sirve y cómo usar GetElementById?

Este método nos permite obtener un elemento del DOM segun el valor del atributo id del mismo:

document.getElementById(<id_elemento>)

Ejemplo de uso de getElementById

Para el siguiente elemento:

<div id='div_id' > div con id='div_id' </div> 

Lo podríamos obtener de la siguiente forma:

document.getElementsById("div_id")

¿Para qué sirve y cómo usar getElementsByTagName?

Este método nos permite obtener todos los elementos del DOM segun el nombre de la etiqueta del elemento; la colección de elementos será devuelta en un array.

document.getElementsByTagName(<nombre_etiqueta_elemento>)

Ejemplo de uso de getElementsByTagName

Para el siguiente elemento:

<p> etiqueta p 1 </p> 
<h2> etiqueta h2 </h2> 
<p> etiqueta p 2 </p> 

Lo podríamos obtener de la siguiente forma:

document.getElementsByTagName("p")
/*
  nos trae un array cuyo tag name (nombre etiqueta) sea p
[
<p> etiqueta p 1 </p>, 
<p> etiqueta p 2 </p> 
]
*/

¿Para qué sirve y cómo usar getElementsByClassName?

Este método nos permite obtener todos los elementos del DOM segun el valor del atributo class del mismo; dicha colección será devuelta en un array.

document.getElementById(<class_elemento>)

Ejemplo de uso de getElementsByClassName

<p class='miclase' > p con class='miclase' </p> 
<h1 class='miclase' > h1 con class='miclase' </h1> 
<p class='otraclase' > p con class='otraclase' </p> 
<p class='miclase' > p con class='miclase' </p> 
<p class='miclase' > p con class='miclase' </p> 
document.getElementsByClassName("miclase")

/*
  nos trae un array con los elementos cuya clase sea 'miclase'
[
<p class='miclase' >p con class='miclase' </p>,
<h1 class='miclase' >h1 con class='miclase' >,
<p class='miclase' >p con class='miclase' </p>,
<p class='miclase' >p con class='miclase'</p>
]
*/

Conclusión

Como podemos ver; tenemos muchas formas diferentes de acceder fácilmente a los elementos del DOM; sin utilizar ningún framework como jquery y las repercusiones que esto nos traería.

Nota: El atributo id debe ser único en cada página HTML.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Librería para gestos

Librería para gestos

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

Creando un archivo descargable con JavaScript

Creando un archivo descargable con JavaScript

En esta entrada veremos como generar un archivo a partir de un contenido de un campo de texto para su descarga en un archivo de texto plano.

Andrés Cruz 04-12-2014

Los web workers para ejecutar JavaScript en paralelo

Los web workers para ejecutar JavaScript en paralelo

Los web workers permiten ejecutar secciones de código de archivos JavaScript en paralelo en un hilo aparte; en esta entrada veremos cómo trabajar con los web workers.

Andrés Cruz 01-10-2015

Cómo capturar videos desde la cámara con PhoneGap

Cómo capturar videos desde la cámara con PhoneGap

Andrés Cruz 08-05-2017