Difference between querySelector, querySelectorAll, getElementbyId, getElementbyTag


I would like if someone could explain to me very easily what are the differences between these 'selectors' since I am struggling to understand them! Especially among the querys and the get element. Thank you very much!

asked by Infraganti 03.09.2016 в 22:54

2 answers


Base Functions

querySelector :

Returns the first element that meets the given criteria. It can be invoked on document or on some element. If used on an element, the search is limited to the children of that element.

If the search finds nothing, return null .


Returns all elements that meet the given criteria. Like querySelector can be invoked on the document or on some element. It always returns a NodeList , which is not an array with all of the law (map, reduce, indexOf, etc), but I could easily become one.


If you can not find elements that meet the criteria, return a NodeList without elements, never return null .

Specialized functions


Returns the first element with the specified id , is in many ways equivalent to doing querySelector('#elId') . That is, it returns null if there are no elements with said Id.


Returns all the elements whose name tag is, in many ways equivalent to doing, querySelectorAll('div') (if you search <div/> ). That is, it returns a% empty% if there is nothing that meets the conditions.

Finally, there is this other one.


Returns all the elements that mention the specified class, is in many ways equivalent to doing, getElementByClassName . It also returns a querySelectorAll('.clase') , same rules.

Dynamic NodeList:

Another very important difference is that a NodeList result of NodeList and getElementsByTagName are dynamic , that is to say that if after executing the query, a node to the DOM that meets the criterion, this appears in getElementsByClassName without needing to repeat the query . This is a very important difference compared to NodeList .

var nodelist = document.querySelectorAll('.a');
var nodelist2 = document.getElementsByClassName('a');

function agregarOtroDiv() {
   var e = document.createElement('div');
<button onclick="agregarOtroDiv()">agregar div</button>
<div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div>


Specialized functions are more efficient, performance tests have been carried out and in the best case they can exceed the speed of querySelectorAll and querySelector . But this is quite variable and depends on the implementation.

answered by 03.09.2016 / 23:39

for the following HTML

  <p id="elemento1" class="clase1">Hola mundo</p>
  <p class="clase1" >hola mundo2</p>

QuerySelector : Select the first item that matches the query.

Example: document.querySelector('.clase1').innerHTML // hola mundo

QuerySelectorAll : select all matches and return them in an array


document.querySelectorAll('.clase1')[0].innerHTML // hola mundo
document.querySelectorAll('.clase1')[1].innerHTML // hola mundo2

getElementById : Select the first item that contains the id as the indicated value.

Example: document.getElementById('elemento1').innerHTML // hola mundo

getElementByTag does not exist, worse if there is getElementByTagName

getElementByTagName: gets all the elements that match the query, but only html tags are allowed: p, b, div, li ... etc


document.querySelectorAll('p')[0].innerHTML // hola mundo
document.querySelectorAll('p')[1].innerHTML // hola mundo2
answered by 03.09.2016 в 23:18