Get Element Attributes with JavaScript

By  on  

What I love so much about JavaScript is that the language is incredibly dynamic.  So dynamic that you can modify native objects if you so choose.  One dynamic property I've frequently been using lately is the attributes property of DOM elements.  This attributes property provides me the names and values of every attribute on a given element!

The HTML

Let's assume we're working with the following element:

<div class="myClass" id="myId" title="Some text title">Some text</div>

A simple DIV with a few frequently used attributes.  We can use getAttribute() to get attributes when we know they're there, but how do we simply get an object containing all attributes?

The JavaScript

DOM elements have an attributes property which contains all attribute names and values:

var attrs = document.getElementById("myId").attributes;

// returns NamedNodeMap {0: class, 1: id, 2: title, ...}

Using Array.prototype.slice.call, which is also helpful in converting NodeLists to Arrays, you can convert the result to a true array which you can iterate over:

Array.prototype.slice.call(document.getElementById("myId").attributes).forEach(function(item) {
	console.log(item.name + ': '+ item.value);
});

// class: myClass
// id: myId
// title: Some text title

The attributes property of an element is incredibly handy when you're looking to see what attributes are present without explicitly knowing which to look for; the attributes property provides an awesome level of dynamism.

Until I found the need to grab every attribute from an element, I wasn't aware that such a list existed.  Now that I'm aware of the this property, however, I'm trying to think up ways to abuse the information provided to empower elements even more.  If you've ever found a useful use of the attributes property, please share it!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Dijit&#8217;s TabContainer Layout:  Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Discussion

  1. One useful way to use attributes is for « cloning » (esp. data-*).

  2. MaxArt

    As far as HTML elements are concerned, I used the attributes property just to create a polyfill for the dataset property in browsers supporting Object.defineProperty.

    I used it also in XML documents when I want to make a special conversion of a node into a Javascript object:

    var attrs = elem.attributes, obj = {}, i = 0;
    for (; i < attrs.length; i++) {
        obj[attrs[i].name] = attrs[i].value;
    }
    

    By the way, David: it's item.value, not item.property.

  3. I was right now working on a reflection way of mapping properties and css properties even in-line.

    For those who are using ZeptoJS or JQuery Here is a plugin.

    (function($) {
        $.fn.getAttributes = function() {
            var attributes = {}; 
    
            if( this.length ) {
                $.each( this[0].attributes, function( index, attr ) {
                    attributes[ attr.name ] = attr.value;
                } ); 
            }
            return attributes;
        };
    })();
    
  4. Arthur

    Recently I’m working on a way of grab all attributes to make changes in function of media query. Some behaviors need to be disabled and and that way it’s only done by js

  5. A more efficient way to get all element attributes is to use getAttributeNames() with getAttribute();

    const elementAttributes = (elem) =>
      elem.getAttributeNames().reduce((attrMap, name) => {
        attrMap[name] = elem.getAttribute(name);
        return attrMap;
      }, {});
    

    And a heads up that attributes is not supported in older versions of IE and new versions return a object map instead of index. It also doesn’t support getAttributeNames.

    sources:
    * https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames
    * https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!