npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

scoped-queryselectorall

v1.0.0

Published

A scoped querySelectorAll replacement

Downloads

3,157

Readme

Scoped QuerySelectorAll

A replacement for querySelectorAll, that allows scoped queries like popular libraries. Only 735 bytes minimized (402 bytes gzipped)

Usage

// equal to document.querySelectorAll('.myclass')
var results = query('.myclass');

// scoped to a particular element
var results = query('.myclass', parentElement);

// Supports direct child selector from the scoped element, this will select all divs that are immediate children
var results = query('> div', parentElement);

Install

The module works as CommonJS module, AMD module or as a global variable. It is available from npm, bower or you can add the file in the dist folder directly to the page and use it as a global variable.

// npm
npm install scoped-queryselectorall
// bower
bower install scoped-queryselectorall
// global
lski.query

Why

Element.querySelectorAll probably does not work the way you think it does as it behaves differently to popular libraries such as jQuery. Imagine the following situation:

<body>
	<div id="parentElement">
		<div class="outerChild">
			<div class="innerChild">
			</div>
		</div>
	</div>
</body>
var parentElement = document.getElementById('parentElement');

When using $('div div', parentElement) or $(parentElement).find('div div') the library will look for any div elements that are descendants of another div that is also a descendant of parentElement. This seems logical and would result in the single innerDiv div being found.

However parentElement.querySelectorAll('div div') doesnt do that, it looks for ANY div inside of a div throughout the document, then excludes those divs that are not descendants of the parentElement. Meaning that both the outerDiv and the innerDiv are returned, as the outerDiv also has a div as a parent, even though thats the parentElement itself.

Build

To build the distribution files, at the command line follow run the following commands. The first command installs required node modules if not already loaded and then run the build.

npm install
npm run build

Test

To run the tests in the browser, at the command line follow run the following commands. The first command installs required node modules if not already loaded and then open a browser and run the tests.

npm install
npm test

Notes

This is a very simple API to patch the unexpected behaviour with Element.querySelectorAll and it uses document.querySeletorAll() internally so you are limited to the same selectors as you would have natively in the browser.

It does not patch complex selectors missing in earlier browsers (e.g. IE8). If you require a selector library that shims those selectors I recommend Sizzle which is the selector library used in jQuery (although doesnt have any dependencies on jQuery) and has amazing support for older browsers.