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

Answers:

Answer

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

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.