querySelector/querySelectorAll shims that enable the use of :scope
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.gitignore
LICENSE
README.md
gruntfile.js
index.js
karma.conf.js
package.json

README.md

scopedQuerySelectorShim

querySelector/querySelectorAll shims that enable the use of :scope

What is :scope in the context of querySelector?

:scope, when combined with the immediate child selector >, lets you query for elements that are immediate children of a HTMLElement instance.

For instance, you might want to find all list items of an unordered list that is an immediate child of node:

var listItems = node.querySelector(':scope > ul > li');

This is effectively equivalent to using jQuery's find():

var $listItems = $(node).find('> ul > li');

See the Mozilla Developer Network article on :scope for more information.

Usage

Simply include the JavaScript file:

<script src="scopeQuerySelectorShim.js"></script>

Notes

  • Tests :scope support before inserting itself, and uses it if it's available
    • Falls back to an ID-based querySelector call against the the parent if not
  • Shimmed querySelectorAll returns a NodeList, just like the native method
  • Can be called on an element that does not have an ID
  • Can be called on an element that is not currently in the DOM
  • Modifies HTMLElement.prototype
  • Document.prototype's querySelector/querySelectorAll methods are not shimmed
    • :scope is not relevant at the document level
    • Use document.documentElement.querySelector instead without :scope

Tests

To run the tests:

npm install
grunt test

License

scopedQuerySelectorShim is licensed under the permissive BSD license.