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

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

Circunferencia animada con Canvas

Circunferencia animada con Canvas

Algunos artículos que te pueden interesar

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

En esta entrada veremos como copiar una imagen producto de una captura de pantalla que se encuentre guardada de manera temporal en el portapapeles o clipboard en un elemento img.

Andrés Cruz 29-01-2015

Uso básico del Canvas en HTML

Uso básico del Canvas en HTML

El elemento canvas nos permite especificar un área de la página en donde se puede dibujar crear todo tipo de gráficos simples o complejos a partir de primitivas básicas como círculos, óvalos, rectángulos líneas, polígonos, texto, etc.

Andrés Cruz 25-01-2016

Primeros pasos con las Cookies en JavaScript

Primeros pasos con las Cookies en JavaScript

JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.

Andrés Cruz 17-12-2015