Automatically creates a collection of element references keyed from the ID attribute of all page element
Automatically creates a collection of element references keyed from the ID attribute of all page elements
Comes in handy when writing Electron apps, OS X Cocoa apps with webviews, websites... basically anything that uses HTML / JS / CSS as the view. The module queries all DOM elements with an id attribute and stores reference to that element in a collection keyed off the camel-cased id value.
For example, assuming the markup below:
...
<body>
<div id="container">
<div id="main-title"></div>
</div>
</body>
...
auto-id allows us to access all elements with an id attribute without writing queries (or querying the DOM):
var dom = require('auto-id');
// IMPORTANT: If using a shared instance (the default behavior illustrated above),
// we probably need to "refresh" our instance since it was likely instantiated before
// our DOM was drawn...
dom.refresh();
// Now we have reference to the elements with ID attributes:
dom.container.style.color = '#333';
// Note a kebab-cased ID becomes camelCased
dom.mainTitle.textContent = 'New text here';
// We add an element to the DOM
document.body.appendChild(someElement);
// We need to refresh our instance before we will have a
// reference to it - this is where shared instances provide
// additional value in terms of use and performance
dom.refresh();
// Use the reference liberally without performance concerns
dom.someElementsId.visibility = 'visible';
Install via npm:
$ npm i auto-id --save
By default, this module exports a shared instance.
The constructor can be accessed via the export's AutoId property (see below).
To access the shared instance (probably what you want):
var dom = require('auto-id');
dom.someId.style.transform = 'scale(2)';
Access the constructor:
var AutoId = require('auto-id').AutoId;
var dom = new AutoId();
dom.someId.style.transform = 'scale(2)';
Tests are written in tape.
$ npm test
Test coverage is provided via Istanbul.
$ npm run coverage
FAQs
Automatically creates a collection of element references keyed from the ID attribute of all page element
We found that auto-id demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.