What Is The Difference Between Queryselectorall And Getelementsbytagname?

February 22, 2024 Post a Comment

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.getElementsByTag

Solution 1:

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><metacharset="utf-8"><title>Yandex</title></head><body><ahref="((http://yandex.ru))">Яндекс</a>, 
    <ahref="((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.

Solution 2:

Selections

getElementsByTagName only selects elements based on their tag name. querySelectorAll can use any selector which gives it much more flexibility and power.

Return value

gEBTN returns a live node list.
qSA returns a static node list.

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.

Support

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.

Performance

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.

Baca Juga

Solution 3:

From MDN:

element = document.querySelector(selectors);

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.

elements = element.getElementsByTagName(tagName)

Returns a list of elements with the given tag name. The subtree underneath the specified element is searched, excluding the element itself. The returned list is live, meaning that it updates itself with the DOM tree automatically. Consequently, there is no need to call several times element.getElementsByTagName with the same element and arguments.

Solution 4:

querySelector also supports other CSS selectors such as "#id" to get an element by id, and "input[type=text]" to get all input elements with a type=text attribute. See here for more details.

They would probably be about equally fast for simple queries like the one you asked about, but for advanced CSS selectors it is likely much faster (not to mention much less code to write) to use querySelectorAll than applying some manual filtering yourself, which is why libraries like jQuery use querySelectorAll when the browser supports it.

Solution 5:

Here is an example about the difference between querySelector and getElementsByTagName.

In this example,the writer choose the querySelector to solve the problem.

The getElementsByTagName also returns a live nodeList, and when we append the links to the in-memory unordered list, the link is removed from the document, and the length of the collection is affected.

if(you don't want to change the NodeList during the follow-up script work){
    "use querySelectorAll"}
elseif(you want to change the NodeList during the follow-up script work) {
    "use getElementsByTagName" 
}

And you can have a try to use getElementsByTagName in this example,you will see it can't work.

JavaScript Passion