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' </h1>>,
<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.