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!
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!
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 .
querySelectorAll 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.
Array.prototype.slice.call(document.querySelectorAll("div"))
If you can not find elements that meet the criteria, return a NodeList without elements, never return null .
getElementById 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.
getElementByTagName 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.
NodeList 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.
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');
e.className="a"
document.getElementsByTagName('body')[0].appendChild(e);
console.log(nodelist.length);
console.log(nodelist2.length);
}<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.
for the following HTML
<html>
<p id="elemento1" class="clase1">Hola mundo</p>
<p class="clase1" >hola mundo2</p>
</html>
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
Example:
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
example:
document.querySelectorAll('p')[0].innerHTML // hola mundo
document.querySelectorAll('p')[1].innerHTML // hola mundo2