# auto-id > Automatically creates a collection of element references keyed from the ID attribute of all page element Latest version **1.0.2** (published 2017-06-12) · MIT license · 0 weekly downloads ## Install ```sh npm install auto-id pnpm add auto-id yarn add auto-id bun add auto-id ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2017-06-12 | | First published | 2017-06-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=0.10.3 | | Dependencies | 2 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Tyler Peterson | | Maintainers | tylerjpeterson | ## Links - npm: https://www.npmjs.com/package/auto-id - Repository: https://github.com/tylerjpeterson/auto-id - Issues: https://github.com/tylerjpeterson/auto-id/issues - npm.io page: https://npm.io/package/auto-id ## Dependencies (2) - [is-el](https://npm.io/package/is-el.md) ^1.0.0 - [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0 ## Recent versions - 1.0.2 (latest) — 2017-06-12 ## README ![100% test coverage](https://img.shields.io/badge/coverage-100%25-brightgreen.svg) # auto-id > 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: ```html ...

... ``` `auto-id` allows us to access all elements with an `id` attribute without writing queries (or querying the DOM): ```js 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'; ``` ## Installation Install via npm: ```sh $ npm i auto-id --save ``` ## Usage 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): ```javascript var dom = require('auto-id'); dom.someId.style.transform = 'scale(2)'; ``` Access the constructor: ```javascript var AutoId = require('auto-id').AutoId; var dom = new AutoId(); dom.someId.style.transform = 'scale(2)'; ``` ## Tests Tests are written in [`tape`](https://github.com/substack/tape). ```sh $ npm test ``` ## Coverage Test coverage is provided via [`Istanbul`](https://github.com/gotwarlost/istanbul). ```sh $ npm run coverage ``` --- _Source: https://npm.io/package/auto-id · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._