# better-el-ref

> A better way to reference HTML elements

Latest version **2.1.5** (published 2021-06-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install better-el-ref
pnpm add better-el-ref
yarn add better-el-ref
bun add better-el-ref
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.1.5 |
| Published | 2021-06-12 |
| First published | 2021-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Drew Markel |
| Maintainers | drewmrk |
| Keywords | front-end, html, typescript, ref, element, document |

## Links

- npm: https://www.npmjs.com/package/better-el-ref
- Repository: https://github.com/drewmrk/better-el-ref
- Issues: https://github.com/drewmrk/better-el-ref/issues
- npm.io page: https://npm.io/package/better-el-ref

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.1.5 (latest) — 2021-06-12
- 2.1.4 — 2021-06-02
- 2.1.3 — 2021-06-01
- 2.1.2 — 2021-06-01
- 2.1.1 — 2021-05-31
- 2.0.5 — 2021-05-30
- 2.0.3 — 2021-05-30
- 2.0.2 — 2021-05-30
- 1.6.0 — 2021-05-30
- 1.1.0 — 2021-05-29
- 1.0.9 — 2021-05-29
- 1.0.8 — 2021-05-29
- 1.0.7 — 2021-05-28
- 1.0.6 — 2021-05-24
- 1.0.5 — 2021-05-21
- … 4 more at https://npm.io/package/better-el-ref/versions

## README

# better-el-ref

A better way to reference HTML elements in JavaScript.

![CircleCI](https://img.shields.io/circleci/build/github/drewmrk/better-el-ref?style=flat-square) ![npm](https://img.shields.io/npm/v/better-el-ref?style=flat-square) ![npm](https://img.shields.io/npm/dt/better-el-ref?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/better-el-ref?style=flat-square) ![NPM](https://img.shields.io/npm/l/better-el-ref?style=flat-square) ![npm type definitions](https://img.shields.io/npm/types/better-el-ref?style=flat-square) ![Dependents (via libraries.io)](https://img.shields.io/librariesio/dependents/npm/better-el-ref?style=flat-square)

## Reasoning

Consistently calling `document.getElementById('id')` is long and tedious and adds unnecessary length to code. Not to mention, the usage of `document.querySelector('el')` is notoriously slow and so by using the `better-el-ref` package, referencing HTML elements is easy and optimized. `better-el-ref` also provides a nice way to handle elements that do not exist or are empty which keeps code DRY, especially when using TypeScript.

## Usage/Examples

```html
<!-- Generic -->
<div id="element"></div>

<div class="element"></div>

<element></element>

<input name="element" />

<!-- Chaining -->
<div id="element-1">
  <p class="element-1"></p>
</div>

<input name="element-1">
  <elementT></elementT>
</input>

<div id="test">
  <test>
    <div id="test-1">
      <div id="test-2">
        <div id="test-3">
          <div id="test-4">
            <p class="test-class"></p>
          </div>
        </div>
      </div>
    </div>
  </test>
</div>
```

```js
import getElement from 'better-el-ref'

getElement(element, name?)

/* Generic */
getElement('#element') // ID
getElement('.element') // Class
getElement('<element') // Tag
getElement('$element') // Name

/* Chaining */
getElement('#element-1 .element-1') // Nested class
getElement('$element-1 <elementT') // Nested tag
getElement('#test <test #test-1 #test-2 #test-3 #test-4 .test-class') // Nested class

/* Applying operations */
getElement('.test').innerHTML(`<img src="test" />`, 'a') // Append an `img` element to all elements with class of "test"
```

---
_Source: https://npm.io/package/better-el-ref · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._