Get Attributes

What is this?

A lightweight, fully-tested, zero-dependency module to make it easier to work with element attributes, both in browser and Node environments.

npm install get-attributes

Usage

1. Install

There are multiple ways you can install the script. The advised method is to install using npm.

npm i -S get-attributes

If you're not using a module bundler with your client-side JavaScript, (i.e. Webpack, Parcel, Rollup, Snowpack) then you can load the script from a CDN provider:

<!-- choose one -->
<script src="https://unpkg.com/get-attributes"></script>
<script src="https://cdn.jsdelivr.net/npm/get-attributes/dist/index.js"></script>

2. Usage

If you installed the script using npm, then import the package and call the methods.

Note: In Node environments, the parse() method will only accept a string.

import getAttributes from 'get-attributes';

const myElementAttributes = getAttributes.parse(document.getElementById('myElement'));

If you loaded the script from a CDN provider, getAttributes will be globally available. (Note: This can potentially cause namespace collision, which is why the recommended method is to use npm).

<script src="https://unpkg.com/get-attributes"></script>
<script>
    const myElementAttributes = getAttributes.parse(document.getElementById('myElement'));
</script>

API Reference

getAttributes.parse()

Accepts either a node or a string. Returns an object with all of the element's attributes.

Usage

<div id="myElement" class="foo bar" data-random-attribute="23ijo" data-empty-attribute></div>

<script>
    getAttributes.parse(document.getElementById('myElement'));

    // {
    //     class="foo bar",
    //     "data-empty-attribute": "",
    //     "data-random-attribute": "23ijo",
    //     id: "myElement"
    // }
</script>

import getAttributes from 'get-attributes';

getAttributes.parse(document.getElementById('myElement'));

// {
//     class="foo bar",
//     "data-empty-attribute": "",
//     "data-random-attribute": "23ijo",
//     id: "myElement"
// }

import getAttributes from 'get-attributes';

const myElementString = `<div id="myElement" class="foo bar" data-random-attribute="23ijo" data-empty-attribute></div>`;

getAttributes.parse(myElementString);

// {
//     class="foo bar",
//     "data-empty-attribute": "",
//     "data-random-attribute": "23ijo",
//     id: "myElement"
// }

getAttributes.stringify()

Accepts an object. Retuns a string with all of the element's attributes.

<div id="myElement" class="foo bar" data-random-attribute="23ijo" data-empty-attribute></div>

<script>
    const myElementAttributes = getAttributes.parse(document.getElementById('myElement'));
    
    getAttributes.stringify(myElementAttributes);
    
    // `class="foo bar" data-random-attribute="23ijo" data-empty-attribute id="myElement"`
</script>

import getAttributes from 'get-attributes';

const myElementAttributes = getAttributes.parse(document.getElementById('myElement'));

getAttributes.stringify(myElementAttributes);

// `class="foo bar" data-random-attribute="23ijo" data-empty-attribute id="myElement"`

import getAttributes from 'get-attributes';

const myElementString = `<div id="myElement" class="foo bar" data-random-attribute="23ijo" data-empty-attribute></div>`;
const myElementAttributes = getAttributes.parse(myElementString);

getAttributes.stringify(myElementAttributes);
    
// `class="foo bar" data-random-attribute="23ijo" data-empty-attribute id="myElement"`