Menu
I was wondering about two different syntax of selecting element in JavaScript.
suppose if I want to select all divs from current document then:
var divs = document.getElementsByTagName("div"); console.log("There are "+divs.length+" Divs in Document !"); Will work fine. But there is also another way of doing so, like:
var divs = document.querySelectorAll("div"); console.log("There are "+divs.length+" Divs in Document !"); When both of them works in the same way. What's the difference between them ?
Thanks in advance. I've seen the questions like this but they didn't satisfied the need.
349
The difference is in versatility and browser support. @Salman_A querySelectorAll is new and hence supported by new browsers. But getElementsByTagName is old and hence has great support.
Differences: As seen above, querySelector() methodcan only be used to access a single element while querySelectorAll() method can be used to access all elements which match with a specified CSS selector. To return all matches, querySelectorAll has to be used, while to return a single match, querySelector is used.
The querySelectorAll() method in HTML is used to return a collection of an element's child elements that match a specified CSS selector(s), as a static NodeList object. The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers.
Specifically, getElementById() and getElementsByClassName() are more than twice as fast as querySelector() and querySelectorAll() .
Most answeres are wrong. Nicolae Olariu is the only, who answered correcly
Which one is faster? Why?
are not the questions. The real question "How it works?"
The main difference is in this example:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Yandex</title> </head> <body> <a href="((http://yandex.ru))">Яндекс</a>, <a href="((http://yandex.com))">Yandex</a> </body> <script> var elems1 = document.getElementsByTagName('a'), // return 2 lements, elems1.length = 2 elems2 = document.querySelectorAll("a"); // return 2 elements, elems2.length = 2 document.body.appendChild(document.createElement("a")); console.log(elems1.length, elems2.length); // now elems1.length = 3! // while elems2.length = 2 </script> </html> Because querySelectorAll returns a static (not live) list of elements.
126
getElementsByTagName only selects elements based on their tag name. querySelectorAll can use any selector which gives it much more flexibility and power.
Live node lists can be useful (you can query once, store the value, and have it update as the DOM changes) but are responsible for a lot of confusion such as the example in this question.
Usually a static list is easier to deal with.
See caniuse for gEBTN and qSA.
gEBTN has more support, but qSA has support in all browsers that are relevant for most use cases today.
You probably shouldn't care. These functions are unlikely to be a bottleneck in your code.
I've seen conflicting reports about which is faster. It likely varies between browsers anyway.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
