CODEWITHSUNDEEP
javascriptdom
Gabriel Kunkel
Gabriel Kunkel

Reputation: 2761

Is element.querySelector() different from document.querySelector()?

Looking through the mdn "querySelector" pops up under both sections and yet they both seem to achieve the same ends. Is either one ideal for different situations? ...or are they, basically, functionally the same?

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Upvotes: 2

Views: 793

Answers (2)

ray
ray

Reputation: 27245

The only difference is where the query is rooted. element.querySelector only searches the children of element. Because the scope is narrower it's more efficient.

Upvotes: 3

maioman
maioman

Reputation: 18734

it's more efficient to use Element.querySelector() because you're referencing to a narrower target if compared to Document.querySelector();

in both ways you'll have access to the DOM tree, but since the starting point is always document using Document.querySelector() you'll be traversing the dom entirely from the root until a child element will match.

On the other hand Element is already a reference to a certain node so the query won't begin from root, with all that comes with it ...

Upvotes: 3

Related Questions