Many times we use jQuery for ease of selecting DOM elements and being able to work with them. But, we can access the same elements in similar ways with pure JavaScript; using the Selectors getElementById, getElementsByTagNames and getElementsByClassName in addition to the very little known querySelector and querySelectorAll.
What is it for and how to use querySelector?
If we have worked with selectors in CSS; then it will be very easy for us to work with this JavaScript selector, since it allows us to obtain the elements using the same syntax that we apply when we create our rules in CSS; with querySelector we can obtain the first DOM element that matches what we pass to it. It works exactly the same as jQuery selectors.
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');
// get <li class="uno" id="uno"> uno </li>
document.querySelector('#ejemplo1 .uno');
// get <li class="uno" id="uno" > uno </li>
document.querySelector('#ejemplo1 #dos.dos');
// get <li class="dos" id="dos" > dos </li>
document.querySelector('#ejemplo1 > #dos.dos');
// get <li class="dos" id="dos" > dos </li>What is it for and how to use querySelectorAll?
querySelectorAll works in the same way as the previous selector (querySelector), but returns all the elements that match the given condition, instead of just the first element; this collection of elements will be represented in an array.
Example of using 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');
/*
It brings us an array with the elements that meet the previous condition
[
<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>
]
*/What is it for and how to use GetElementById?
This method allows us to obtain a DOM element according to the value of its id attribute:
document.getElementById(<id_elemento>)GetElementById Usage Example
For the next element:
<div id='div_id' > div con id='div_id' </div> We could obtain it in the following way:
document.getElementsById("div_id")What is it for and how to use getElementsByTagName?
This method allows us to obtain all DOM elements according to the name of the element tag; the collection of elements will be returned in an array.
document.getElementsByTagName(<nombre_etiqueta_elemento>)GetElementsByTagName Usage Example
For the next element:
<p> etiqueta p 1 </p>
<h2> etiqueta h2 </h2>
<p> etiqueta p 2 </p> We could obtain it in the following way:
document.getElementsByTagName("p")
/*
It brings us an array whose tag name is p
[
<p> etiqueta p 1 </p>,
<p> etiqueta p 2 </p>
]
*/What is it for and how to use getElementsByClassName?
This method allows us to obtain all the elements of the DOM according to the value of its class attribute; This collection will be returned in an array.
document.getElementById(<class_elemento>)GetElementsByClassName Usage Example
<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")
/*
It brings us an array with the elements whose class is 'myclass'
[
<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>
]
*/Conclusion
As we can see; we have many different ways to easily access DOM elements; without using any framework like jquery and the repercussions that this would bring us.
Note: The id attribute must be unique on each HTML page.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter