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

Question

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 ar

Answer 1

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 2

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.