Return elements matching a selector relative to the current node
OTHER License
Element QSA Scope lets you select elements relative to the current node. It
is a polyfill for :scope
support within the selector methods
Element#querySelector
, Element#querySelectorAll
, Element#matches
,
and Element#closest
.
npm install element-qsa-scope
The entire script is 341 bytes when minified and gzipped.
By default, selector methods return elements matching CSS selectors absolutely
from the document, similar to an element being matched with Element#matches
.
Imagine the following document:
<ul>
<li><a>Link</a>
<ul>
<li><a>Sublink</a></li>
</ul>
</li>
</ul>
<script>li = document.querySelector('li')</script>
Without :scope
, the following selector will return the first link.
li.querySelector('li a'); // returns <a>Link</a>
This is an example of how scoping is useful when traversing the DOM.
li.querySelector(':scope li a'); // returns <a>Sublink</a>
Browser | Native Support | Polyfill Support |
---|---|---|
Android | 4.4+ | 2.2 - 4.2 |
Blackberry | ✘ | 7+ |
Chrome | 27+ | 4 - 26 |
Edge | ✘ | 12+ |
Firefox | 32+ | 3.5 - 31 |
Internet Explorer | ✘ | 8 - 11 |
Opera | 15+ | 10 - 14 |
Opera Mini | ✘ | 5+ |
Safari (iOS) | 7+ | 3.2 - 6 |
Safari (MacOS) | 6.2+ | 4 - 6 |
Additional tests were run against the latest 3 versions of browsers, including common outliers such as Internet Explorer 8+ and Safari 6+.