如何获取DOM元素的所有属性？

Question

如何将DOM元素的所有用户定义属性复制到数组中？我未成功通过测试获得["type", "onClick",'value','id'] 请参阅以下代码

的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

这些属性可在attributes NamedNodeMap上找到;您使用[]表示法访问每一个，并且有一个length。

所以：

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 2

Get all Attributes from a HTML element with Javascript/jQuery

将它与你的JS一起使用，你得到：

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);

Answer 3

使用.slice将attributes属性转换为数组

DOM节点的attributes属性是NamedNodeMap，它是一个类似于数组的对象。

类似于Array的对象是一个具有length属性并且其属性名称被枚举的对象，但是具有其自己的方法并且不从Array.prototype继承

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

var obj   = document.getElementById('input').attributes,
    array = Array.prototype.slice.call(obj);
console.log(array);

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