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

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