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

dom-named-access

v1.1.0

Published

Safe and fast access to named elements in DOM document.

Downloads

4

Readme

DOM named access

This microlibrary provides a safe way to access all the named elements (those with a non empty id attribute) in the window DOM.

By default, the engine will keep track of the changes in the DOM tree, and mantain an updated collection of available named elements ( through in DOM.id ).

Why ?

The HTML5 specification brought us a standarized way to access our named elements directlly from the window object ( called Named access on the Window object ). However it exists a general consensus in avoiding the usage of this feature, because can generate collisions with root native method and property names, dragging you to a hell of bugs, hard to deal with.

Is well known that caching our references to DOM elements can provide us great benefits in performance, and even make our code more readable. It will free you from the continued use of document.getElementById() or document.querySelector().

Here is where Dom-named-access appears : It aims to provide a safe alternative to the HTML5 Named access on the window object feature, and a fast way to reach our named elements.

Usage

Imagine you have the following HTML in your document :

<div>
    <div id="myFirstDiv"></div>
    <div id="mySecondDiv"></div>
    <div id="myThirdDiv"></div>
</div>

To access any of the previous named divs, you only need to import the library and you will find your named elements inside the DOM.id object :

import {DOM} from './dom-named-access.js';

// delete the div with id="mySecondDiv"
DOM.id.myFirstDiv.remove();

Because a DOM Mutation Observer is initialized internally by the library, any node removal or addition in your document will be detected and handled automatically : the new named elements will be available in the DOM.id object, and removed nodes with id will be taken away from the DOM.id list. (check the Performance section for more details about this feature)

Attention : The DOM Mutation Observer runs asynchronously ! Changes performed in the DOM will not be handled in the event loop cycle where actually happened, but rather be enqueued to run in the next one. Then is when the collection in DOM.id will be updated.

Installation

You can download and install this library in several ways...

Use npm package manager :

$ npm install dom-named-access -s

Clone the app from Github :

$ git clone https://github.com/colxi/dom-named-access.git

...or download the latest Release in a .zip package here

Public API details

The DOM object provides the main public elements collection :

DOM.id : Live Collection of named elements in the DOM

Two handful DOM references :

DOM.doctype : Reference to the doctype element

DOM.html : Reference to the html element (top element)

DOM.head : Reference to document.head

DOM.body : Reference to document.body

DOM[':root'] : Special Reference to the DOM root element (whatever it is)

And some internal/configuration properties and methods :

DOM.__idTrack__ : Boolean property to enable/disable the DOM observer

DOM.__idCacheUpdate__ : Method to perform a manual DOM named elements scan & update

Performance

The internal DOM Mutation Observer setted by this library can become a performance killer in scenarios where the DOM tree is masive, and continuous changes (node additions / removals) are performed in it. If a lost of performance is detected, you can disable the DOM observer and handle the named elements detection manually.

To disable automatic element tracking use

// Disable automatic DOM tracking
DOM.__idTrack__ = false; 

// When you need to update the DOM.id 
// elements list simply call :
DOM.__idCacheUpdate__();