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

@peter.naydenov/dom-selector

v2.1.3

Published

DOM selections and DOM references organizer

Downloads

207

Readme

DOM Selector ( @peter.naydenov/dom-selector )

version GitHub License GitHub issues npm bundle size

Description

Keep all DOM selections and DOM references organized in a single space. Avoid long and difficult-to-read select operations in your code by using simple and meaningful names instead.

Framework agnostic. No dependencies.

Methods

DOM Selector provides only 4 methods:

  define    : 'Define a new selection'
, remember : 'Store a DOM reference directly as a last result without creating a selection.'
, run      : 'Run a selection'
, use      : 'Use the last result of the selection or remembered DOM reference'

Installation

npm install @peter.naydenov/dom-selector

From the project:

import domSelector from '@peter.naydenov/dom-selector';
// or require it:
// const domSelector = require('@peter.naydenov/dom-selector');

const dom = domSelector();
// Ready to use

How to use it

import domSelector from '@peter.naydenov/dom-selector';
const dom = domSelector();

// Define a selection
dom.define ({
      name: 'li'
    , selector: () => document.querySelector('li')  
})

// Run a selection
const navItems = dom.run ('li');

// use the last result of the selection. Do not trigger a selection again.
for ( let item of dom.use ( 'li' )) {
      // do something with the item
  }

// Example:
dom.define ({
              name: 'nav'
            , selector: () => document.getElementById ( 'nav' )
            , where : ({ item, i, END, length, up, down }, extra) => item.tagName === 'LI'
            // item   -> selector element
            // i      -> index of the selector element
            // length -> length of the result array
            // END    -> Symbol to stop the scan
            // up     -> up() function returns a list of all parent DOM nodes.
            // down   -> down() function returns a list of all nested DOM nodes.
            // extra   -> extra argument coming from the 'run' function
            })
// dom.run ( 'nav') -> will collect all <li> elements inside #nav
dom.run ( 'nav', extra ).map ( item => {
                // do something with the <li> element
            })

Definition of Selection

const selection = {
    name: 'mySelection' // *required. A unique name for the selection
  , selector: () => document.querySelector('div')   // *required. A function that returns a DOM node or list of DOM node references
  , direction : 'up' // optional. Values: 'up' or 'down'. Default: 'down'.
  , where : ({ item, i, END, length, up, down }) => item.classList.contains('myClass') // optional. A function that can filter nodes from selector function. Returns item to include it in selection, null for removing the item from the selection or END to stop the selection process. Use 'up' and 'down' arguments are functions to get the list of nodes in the current direction.
}


// Example:
// Select only <li> elements that has a <span> inside
const selection = { 
    name: 'li-span' 
  , selector: () => document.querySelector ( 'li' ) 
  , where : ({ item, i, END, length, up, down }) => {
                                  let hasSpan = false;
                                  for ( let child of down(item) ) { // down(item) -> returns a list of all nested DOM nodes
                                          if ( child.tagName === 'SPAN' ) hasSpan = true;
                                      }
                                  return hasSpan ? item : null;
                          }
}
// Respectively 'up' function returns a list of all parent DOM nodes. 
  • selector : A function that returns a DOM node or list of DOM node references. If the function returns a list of DOM nodes, DOM Selector will use them as a result. If the function returns a single DOM node, DOM Selector will use it as a starting point for DOM scanning and will return a list of DOM nodes according to the direction property;
  • direction: If the selector function returns a single DOM node, DOM Selector will use it as a starting point for DOM scanning and will return a list of DOM nodes according to the direction property. Value 'up' will scan the DOM tree parents up to tag. Value 'down' will scan the DOM tree children down to the last child. Default: 'down'. This property is ignored if the selector function returns a list of DOM nodes;
  • where: Optional. A function that can filter nodes from selector function. Returns the item to select, null to remove. Return END to stop the selection process;

Links

Credits

'@peter.naydenov/dom-selector' was created and supported by Peter Naydenov.

License

'@peter.naydenov/dom-selector' is released under the MIT License.