How to get all attributes of DOM element?

Question

How to copy all user defined attributes for a DOM element into an array? I Unsuccessfully tested to get ["type", "onClick",'value','id'] See the following code

Js

 var obj=document.getElementById('input')/*.attributes*/,
     array=[],
     index=0;
     for(array[index++] in obj);
 console.log(array);

html

<input type='button' onClick="Start()" id='input' value="Start"/>

Answer 1

A Better Answer

I now recommend this answer by Tim Kindberg to the question Get all Attributes from a HTML element with Javascript/jQuery that uses getAttributeNames() and getAttribute(name), which MDN says "is a memory-efficient and performant alternative to accessing Element.attributes."

---

Use Array.from() or Spread Operator ...

Update: Array.from() and Spread operator ... were added to ECMA-262 6th Edition in June 2015, which now has universal modern browser support.

See MDN › Array.from() & Spread syntax (...)

var elem  = document.getElementById('input'),
    attrs = elem.attributes;

console.log('Array.from(attrs)');
Array.from(attrs).forEach(({ name, value }) => {
    console.log(`    ${name}: ${value}`);
})

console.log('[...attrs]');
[...attrs].forEach(({ name, value }) => {
    console.log(`    ${name}: ${value}`);
})

<input type='button' onClick="Start()" id='input' value="Start"/>

---

Note: The following is the legacy answer. It will still work, but the newer Array.from() method is now preferred. This could now be considered a polyfill to support pre-ES2015 targets.

Use .slice to convert the attributes property to Array

The attributes property of DOM nodes is a NamedNodeMap, which is an Array-like object.

An Array-like object is an object which has a length property and whose property names are enumerated, but otherwise has its own methods and does not inherit from Array.prototype

The slice method can be used to convert Array-like objects to a new Array.

var elem  = document.getElementById('input'),
    attrs = elem.attributes;

console.log('Array.prototype.slice.call(attrs)');
Array.prototype.slice.call(attrs).forEach(
    function (cur) {
        console.log(cur.name + ': ' + cur.value);
    }
)

<input type='button' onClick="Start()" id='input' value="Start"/>

Answer 2

The attributes are available on the attributes NamedNodeMap; you access each one with [] notation, and there's a length.

So:

var array = Array.prototype.map.call(
    document.getElementById('input').attributes,
    function(attr) {
        // Use nodeName for the name, nodeValue for the value
        return attr.nodeName;
    });
snippet.log(array.join(", "));

<input type='button' onClick="Start()" id='input' value="Start"/>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="https://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 3

Get all Attributes from a HTML element with Javascript/jQuery

Using it with your JS, you get:

var obj=document.getElementById('input')/*.attributes*/,
     arr=[],
     index=0;

for (var i = 0, atts = obj.attributes, n = atts.length; i < n; i++){
    arr.push(atts[i].nodeName);
}
 console.log(arr);