blocks|key|1146216|text|如果您只需要DOM属性，那么在元素本身上使用attributes节点列表可能更简单：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1146217|var+el+=+document.getElementById("someId");
for+(var+i+=+0,+atts+=+el.attributes,+n+=+atts.length,+arr+=+[];+i+<+n;+i%2B%2B){
++++arr.push(atts[i].nodeName);
}|code-block|syntax|javascript|1146218|请注意，这将仅使用属性名称填充数组。如果需要属性值，可以使用nodeValue属性：|1146219|var+nodes=[],+values=[];
for+(var+att,+i+=+0,+atts+=+el.attributes,+n+=+atts.length;+i+<+n;+i%2B%2B){
++++att+=+atts[i];
++++nodes.push(att.nodeName);
++++values.push(att.nodeValue);
}|1146220|entityMap^0|M|A|0|0|U|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>If you just want the DOM attributes, it's probably simpler to use the <code>attributes</code> node list on the element itself:</p>

<pre><code>var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i &lt; n; i++){
    arr.push(atts[i].nodeName);
}
</code></pre>

<p>Note that this fills the array only with attribute names. If you need the attribute value, you can use the <code>nodeValue</code> property:</p>

<pre><code>var nodes=[], values=[];
for (var att, i = 0, atts = el.attributes, n = atts.length; i &lt; n; i++){
    att = atts[i];
    nodes.push(att.nodeName);
    values.push(att.nodeValue);
}
</code></pre>


blocks|key|1361259|text|你可以使用这个简单的插件作为$('#some_id').getAttributes()；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361260|(function($)+{
++++$.fn.getAttributes+=+function()+{
++++++++var+attributes+=+{};+

++++++++if(+this.length+)+{
++++++++++++$.each(+this[0].attributes,+function(+index,+attr+)+{
++++++++++++++++attributes[+attr.name+]+=+attr.value;
++++++++++++}+);+
++++++++}

++++++++return+attributes;
++++};
})(jQuery);|code-block|syntax|javascript|1361261|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use this simple plugin as $('#some_id').getAttributes();</p>

<pre><code>(function($) {
    $.fn.getAttributes = function() {
        var attributes = {}; 

        if( this.length ) {
            $.each( this[0].attributes, function( index, attr ) {
                attributes[ attr.name ] = attr.value;
            } ); 
        }

        return attributes;
    };
})(jQuery);
</code></pre>


blocks|key|1361266|text|简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361267|var+element+=+$("span[name='test']");
$(element[0].attributes).each(function()+{
console.log(this.nodeName%2B':'%2Bthis.nodeValue);});|code-block|syntax|javascript|1361268|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple:</p>

<pre><code>var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});
</code></pre>


blocks|key|1146361|text|因为in+IE7+elem.attributes列出了所有可能的属性，而不仅仅是当前的属性，所以我们必须测试属性值。这个插件可以在所有主流浏览器中运行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1146362|(function($)+{
++++$.fn.getAttributes+=+function+()+{
++++++++var+elem+=+this,+
++++++++++++attr+=+{};

++++++++if(elem+&&+elem.length)+$.each(elem.get(0).attributes,+function(v,n)+{+
++++++++++++n+=+n.nodeName%7C%7Cn.name;
++++++++++++v+=+elem.attr(n);+//+relay+on+$.fn.attr,+it+makes+some+filtering+and+checks
++++++++++++if(v+!=+undefined+&&+v+!==+false)+attr[n]+=+v
++++++++})

++++++++return+attr
++++}
})(jQuery);|code-block|syntax|javascript|1146363|用法：|1146364|var+attribs+=+$('#some_id').getAttributes();|1146365|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Because in IE7 elem.attributes lists all possible attributes, not only the present ones, we have to test the attribute value.
This plugin works in all major browsers:</p>

<pre><code>(function($) {
    $.fn.getAttributes = function () {
        var elem = this, 
            attr = {};

        if(elem &amp;&amp; elem.length) $.each(elem.get(0).attributes, function(v,n) { 
            n = n.nodeName||n.name;
            v = elem.attr(n); // relay on $.fn.attr, it makes some filtering and checks
            if(v != undefined &amp;&amp; v !== false) attr[n] = v
        })

        return attr
    }
})(jQuery);
</code></pre>

<p>Usage:</p>

<pre><code>var attribs = $('#some_id').getAttributes();
</code></pre>


blocks|key|1361365|text|Setter和Getter！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361366|(function($)+{
++++//+Attrs
++++$.fn.attrs+=+function(attrs)+{
++++++++var+t+=+$(this);
++++++++if+(attrs)+{
++++++++++++//+Set+attributes
++++++++++++t.each(function(i,+e)+{
++++++++++++++++var+j+=+$(e);
++++++++++++++++for+(var+attr+in+attrs)+{
++++++++++++++++++++j.attr(attr,+attrs[attr]);
++++++++++++++++}
++++++++++++});
++++++++++++return+t;
++++++++}+else+{
++++++++++++//+Get+attributes
++++++++++++var+a+=+{},
++++++++++++++++r+=+t.get(0);
++++++++++++if+(r)+{
++++++++++++++++r+=+r.attributes;
++++++++++++++++for+(var+i+in+r)+{
++++++++++++++++++++var+p+=+r[i];
++++++++++++++++++++if+(typeof+p.nodeValue+!==+'undefined')+a[p.nodeName]+=+p.nodeValue;
++++++++++++++++}
++++++++++++}
++++++++++++return+a;
++++++++}
++++};
})(jQuery);|code-block|syntax|javascript|1361367|使用：|1361368|//+Setter
$('#element').attrs({
++++'name'+:+'newName',
++++'id'+:+'newId',
++++'readonly':+true
});

//+Getter
var+attrs+=+$('#element').attrs();|1361369|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Setter and Getter!</p>

<pre><code>(function($) {
    // Attrs
    $.fn.attrs = function(attrs) {
        var t = $(this);
        if (attrs) {
            // Set attributes
            t.each(function(i, e) {
                var j = $(e);
                for (var attr in attrs) {
                    j.attr(attr, attrs[attr]);
                }
            });
            return t;
        } else {
            // Get attributes
            var a = {},
                r = t.get(0);
            if (r) {
                r = r.attributes;
                for (var i in r) {
                    var p = r[i];
                    if (typeof p.nodeValue !== 'undefined') a[p.nodeName] = p.nodeValue;
                }
            }
            return a;
        }
    };
})(jQuery);
</code></pre>

<p>Use:</p>

<pre><code>// Setter
$('#element').attrs({
    'name' : 'newName',
    'id' : 'newId',
    'readonly': true
});

// Getter
var attrs = $('#element').attrs();
</code></pre>


blocks|key|1146610|text|使用.slice将attributes属性转换为数组|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1146611|DOM节点的attributes属性是一个NamedNodeMap，它是一个类似数组的对象。|1146612|类数组对象是具有length属性且其属性名称被枚举的对象，但在其他情况下具有其自己的方法且不从Array.prototype继承|1146613|The+slice+method+can+be+used+to+convert+Array-like+objects+to+a+new+Array。|1146614|​|1146615|var+elem++=+document.querySelector('[name=test]'),
++++attrs+=+Array.prototype.slice.call(elem.attributes);

console.log(attrs);|code-block|syntax|javascript|1146616|<span+name="test"+message="test2">See+console.</span>|1146617|1146618|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype|2|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Array-like^0|2|6|9|A|0|6|A|L|C|L|C|0|0|8|6|1B|F|1B|F|1|0|4|5|0|21|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|H|3|I|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|J|3|K|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|L|3|M|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1Z|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|P|7|20|8|@]|D|@]|E|$Q|R]]|$1|U|3|M|5|6|7|21|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|22|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]|13|$5|Y|Z|10|E|$11|14]]|15|$5|Y|Z|10|E|$11|16]]]]

<h2>Use <code>.slice</code> to convert the <code>attributes</code> property to Array</h2>

<p>The <code>attributes</code> property of DOM nodes is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap" rel="noreferrer"><code>NamedNodeMap</code></a>, which is an Array-like object.</p>

<p>An Array-like object is an object which has a <code>length</code> property and whose property names are enumerated, but otherwise has its own methods and does not inherit from <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype" rel="noreferrer"><code>Array.prototype</code></a></p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#Array-like" rel="noreferrer">The <code>slice</code> method can be used to convert Array-like objects to a new Array</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var elem  = document.querySelector('[name=test]'),
    attrs = Array.prototype.slice.call(elem.attributes);

console.log(attrs);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span name="test" message="test2"&gt;See console.&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1146946|text|非常简单。您只需要遍历attributes元素并将它们的nodeValues推入一个数组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1146947|let+att+=+document.getElementById('id');

let+arr+=+Array();

for+(let+i+=+0;+i+<+att.attributes.length;+i%2B%2B)+{
++++arr.push(att.attributes[i].nodeValue);
}|code-block|syntax|javascript|1146948|如果您想要属性的名称，可以将“nodeValue”替换为“nodeName”。|1146949|let+att+=+document.getElementById('id');

let+arr+=+Array();

for+(let+i+=+0;+i+<+att.attributes.length;+i%2B%2B)+{
++++arr.push(att.attributes[i].nodeName);
}|1146950|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Very simple. You just need to loop over the attributes element and push their nodeValues into an array:</p>
<pre><code>let att = document.getElementById('id');

let arr = Array();

for (let i = 0; i &lt; att.attributes.length; i++) {
    arr.push(att.attributes[i].nodeValue);
}
</code></pre>
<p>If you want the name of the attribute you can replace 'nodeValue' for 'nodeName'.</p>
<pre><code>let att = document.getElementById('id');

let arr = Array();

for (let i = 0; i &lt; att.attributes.length; i++) {
    arr.push(att.attributes[i].nodeName);
}
</code></pre>


blocks|key|1361806|text|这里的每个答案都缺少使用getAttributeNames元素方法的最简单的解决方案！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1361807|它以常规Array的形式检索所有元素的当前属性的名称，然后您可以将其简化为键/值的良好对象。|1361808|​|1361809|const+getAllAttributes+=+el+=>+el
++.getAttributeNames()
++.reduce((obj,+name)+=>+({
++++...obj,
++++[name]:+el.getAttribute(name)
++}),+{})

console.log(getAllAttributes(document.querySelector('div')))|code-block|syntax|javascript|1361810|<div+title="hello"+className="foo"+data-foo="bar"></div>|1361811|1361812|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames^0|C|H|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|O|3|G|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Every answer here is missing the simplest solution using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames" rel="noreferrer">getAttributeNames</a> element method!</p>

<p>It retrieves the names of all the element's current attributes as a regular Array, that you can then reduce to a nice object of keys/values.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const getAllAttributes = el =&gt; el
  .getAttributeNames()
  .reduce((obj, name) =&gt; ({
    ...obj,
    [name]: el.getAttribute(name)
  }), {})

console.log(getAllAttributes(document.querySelector('div')))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div title="hello" className="foo" data-foo="bar"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1361753|text|如果需要获取数组中返回的对象中的所有属性以及名称和值，这种方法效果很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361754|输出示例：|1361755|[
++++{
++++++++name:+'message',
++++++++value:+'test2'
++++}
++++...
]|code-block|syntax|javascript|1361756|​|1361757|function+getElementAttrs(el)+{
++return+[].slice.call(el.attributes).map((attr)+=>+{
++++return+{
++++++name:+attr.name,
++++++value:+attr.value
++++}
++});
}

var+allAttrs+=+getElementAttrs(document.querySelector('span'));
console.log(allAttrs);|1361758|<span+name="test"+message="test2"></span>|1361759|1361760|如果您只需要该元素的属性名称数组，则只需映射结果：|1361761|var+onlyAttrNames+=+allAttrs.map(attr+=>+attr.name);
console.log(onlyAttrNames);+//+["name",+"message"]|1361762|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|O|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|12|8|@]|9|@]|A|$]]|$1|R|3|S|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p>This approach works well if you need to get all the attributes with name and value in objects returned in an array.</p>

<p>Example output:</p>

<pre><code>[
    {
        name: 'message',
        value: 'test2'
    }
    ...
]
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function getElementAttrs(el) {
  return [].slice.call(el.attributes).map((attr) =&gt; {
    return {
      name: attr.name,
      value: attr.value
    }
  });
}

var allAttrs = getElementAttrs(document.querySelector('span'));
console.log(allAttrs);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span name="test" message="test2"&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>If you want only an array of attribute names for that element, you can just map the results:</p>

<pre><code>var onlyAttrNames = allAttrs.map(attr =&gt; attr.name);
console.log(onlyAttrNames); // ["name", "message"]
</code></pre>


blocks|key|1361522|text|Roland+Bouman的answer是最好、最简单的方式。我注意到jQ插件的一些尝试，但它们对我来说似乎还不够“完整”，所以我自己做了一个。到目前为止唯一的缺点是不能在不直接调用elm.attr('dynamicAttr')的情况下访问动态添加的attrs。然而，这将返回jQuery+element对象的所有自然属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1361523|插件使用简单的jQuery风格调用：|1361524|$(elm).getAttrs();
//+OR
$.getAttrs(elm);|code-block|syntax|javascript|1361525|您还可以添加第二个字符串参数，以仅获取一个特定的attr。对于一个元素的选择，这并不是真正需要的，因为jQuery已经提供了$(elm).attr('name')，然而，我的插件版本允许多个返回。因此，例如，像这样的调用|1361526|$.getAttrs('*',+'class');|1361527|将导致对象{}的数组[]返回。每个对象将如下所示：|1361528|{+class:+'classes+names',+elm:+$(elm),+index:+i+}+//+index+is+$(elm).index()|1361529|插件|1361530|;;(function($)+{
++++$.getAttrs+%7C%7C+($.extend({
++++++++getAttrs:+function()+{
++++++++++++var+a+=+arguments,
++++++++++++++++d,+b;
++++++++++++if+(a.length)
++++++++++++++++for+(x+in+a)+switch+(typeof+a[x])+{
++++++++++++++++++++case+"object":
++++++++++++++++++++++++a[x]+instanceof+jQuery+&&+(b+=+a[x]);
++++++++++++++++++++++++break;
++++++++++++++++++++case+"string":
++++++++++++++++++++++++b+?+d+%7C%7C+(d+=+a[x])+:+b+=+$(a[x])
++++++++++++++++}
++++++++++++if+(b+instanceof+jQuery)+{
++++++++++++++++var+e+=+[];
++++++++++++++++if+(1+==+b.length)+{
++++++++++++++++++++for+(var+f+=+0,+g+=+b[0].attributes,+h+=+g.length;+f+<+h;+f%2B%2B)+a+=+g[f],+e[a.name]+=+a.value;
++++++++++++++++++++b.data("attrList",+e);
++++++++++++++++++++d+&&+"all"+!=+d+&&+(e+=+b.attr(d))
++++++++++++++++}+else+d+&&+"all"+!=+d+?+b.each(function(a)+{
++++++++++++++++++++a+=+{
++++++++++++++++++++++++elm:+$(this),
++++++++++++++++++++++++index:+$(this).index()
++++++++++++++++++++};
++++++++++++++++++++a[d]+=+$(this).attr(d);
++++++++++++++++++++e.push(a)
++++++++++++++++})+:+b.each(function(a)+{
++++++++++++++++++++$elmRet+=+[];
++++++++++++++++++++for+(var+b+=+0,+d+=+this.attributes,+f+=+d.length;+b+<+f;+b%2B%2B)+a+=+d[b],+$elmRet[a.name]+=+a.value;
++++++++++++++++++++e.push({
++++++++++++++++++++++++elm:+$(this),
++++++++++++++++++++++++index:+$(this).index(),
++++++++++++++++++++++++attrs:+$elmRet
++++++++++++++++++++});
++++++++++++++++++++$(this).data("attrList",+e)
++++++++++++++++});
++++++++++++++++return+e
++++++++++++}
++++++++++++return+"Error:+Cannot+find+Selector"
++++++++}
++++}),+$.fn.extend({
++++++++getAttrs:+function()+{
++++++++++++var+a+=+[$(this)];
++++++++++++if+(arguments.length)
++++++++++++++++for+(x+in+arguments)+a.push(arguments[x]);
++++++++++++return+$.getAttrs.apply($,+a)
++++++++}
++++}))
})(jQuery);|1361531|合规|1361532|;;(function(c){c.getAttrs%7C%7C(c.extend({getAttrs:function(){var+a=arguments,d,b;if(a.length)for(x+in+a)switch(typeof+a[x]){case+"object":a[x]instanceof+jQuery&&(b=a[x]);break;case+"string":b?d%7C%7C(d=a[x]):b=c(a[x])}if(b+instanceof+jQuery){if(1==b.length){for(var+e=[],f=0,g=b[0].attributes,h=g.length;f<h;f%2B%2B)a=g[f],e[a.name]=a.value;b.data("attrList",e);d&&"all"!=d&&(e=b.attr(d));for(x+in+e)e.length%2B%2B}else+e=[],d&&"all"!=d?b.each(function(a){a={elm:c(this),index:c(this).index()};a[d]=c(this).attr(d);e.push(a)}):b.each(function(a){$elmRet=[];for(var+b=0,d=this.attributes,f=d.length;b<f;b%2B%2B)a=d[b],$elmRet[a.name]=a.value;e.push({elm:c(this),index:c(this).index(),attrs:$elmRet});c(this).data("attrList",e);for(x+in+$elmRet)$elmRet.length%2B%2B});return+e}return"Error:+Cannot+find+Selector"}}),c.fn.extend({getAttrs:function(){var+a=[c(this)];if(arguments.length)for(x+in+arguments)a.push(arguments[x]);return+c.getAttrs.apply(c,a)}}))})(jQuery);|1361533|​|1361534|jsFiddle|1361535|1361536|1361537|/*++BEGIN+PLUGIN++*/
;;(function($)+{
	$.getAttrs+%7C%7C+($.extend({
		getAttrs:+function()+{
			var+a+=+arguments,
				c,+b;
			if+(a.length)
				for+(x+in+a)+switch+(typeof+a[x])+{
					case+"object":
						a[x]+instanceof+f+&&+(b+=+a[x]);
						break;
					case+"string":
						b+?+c+%7C%7C+(c+=+a[x])+:+b+=+$(a[x])
				}
			if+(b+instanceof+f)+{
				if+(1+==+b.length)+{
					for+(var+d+=+[],+e+=+0,+g+=+b[0].attributes,+h+=+g.length;+e+<+h;+e%2B%2B)+a+=+g[e],+d[a.name]+=+a.value;
					b.data("attrList",+d);
					c+&&+"all"+!=+c+&&+(d+=+b.attr(c));
					for+(x+in+d)+d.length%2B%2B
				}+else+d+=+[],+c+&&+"all"+!=+c+?+b.each(function(a)+{
					a+=+{
						elm:+$(this),
						index:+$(this).index()
					};
					a[c]+=+$(this).attr(c);
					d.push(a)
				})+:+b.each(function(a)+{
					$elmRet+=+[];
					for+(var+b+=+0,+c+=+this.attributes,+e+=+c.length;+b+<+e;+b%2B%2B)+a+=+c[b],+$elmRet[a.name]+=+a.value;
					d.push({
						elm:+$(this),
						index:+$(this).index(),
						attrs:+$elmRet
					});
					$(this).data("attrList",+d);
					for+(x+in+$elmRet)+$elmRet.length%2B%2B
				});
				return+d
			}
			return+"Error:+Cannot+find+Selector"
		}
	}),+$.fn.extend({
		getAttrs:+function()+{
			var+a+=+[$(this)];
			if+(arguments.length)
				for+(x+in+arguments)+a.push(arguments[x]);
			return+$.getAttrs.apply($,+a)
		}
	}))
})(jQuery);
/*++END+PLUGIN++*/
/*--------------------*/
$('#bob').attr('bob',+'bill');
console.log($('#bob'))
console.log(new+Array(50).join('+-'));
console.log($('#bob').getAttrs('id'));
console.log(new+Array(50).join('+-'));
console.log($.getAttrs('#bob'));
console.log(new+Array(50).join('+-'));
console.log($.getAttrs('#bob',+'name'));
console.log(new+Array(50).join('+-'));
console.log($.getAttrs('*',+'class'));
console.log(new+Array(50).join('+-'));
console.log($.getAttrs('p'));
console.log(new+Array(50).join('+-'));
console.log($('#bob').getAttrs('all'));
console.log($('*').getAttrs('all'));|1361538|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
All+of+below+is+just+for+stuff+for+plugin+to+test+on.+See+developer+console+for+more+details.
<hr+/>
<div+id="bob"+class="wmd-button-bar"><ul+id="wmd-button-row-27865269"+class="wmd-button-row"+style="display:none;">
<div+class="post-text"+itemprop="text">
<p>Roland+Bouman's+answer+is+the+best,+simple+Vanilla+way.+I+noticed+some+attempts+at+jQ+plugs,+but+they+just+didn't+seem+"full"+enough+to+me,+so+I+made+my+own.+The+only+setback+so+far+has+been+inability+to+access+dynamically+added+attrs+without+directly+calling+<code>elm.attr('dynamicAttr')</code>.+However,+this+will+return+all+natural+attributes+of+a+jQuery+element+object.</p>

<p>Plugin+uses+simple+jQuery+style+calling:</p>

<pre+class="default+prettyprint+prettyprinted"><code><span+class="pln">$</span><span+class="pun">(</span><span+class="pln">elm</span><span+class="pun">).</span><span+class="pln">getAttrs</span><span+class="pun">();</span><span+class="pln">
</span><span+class="com">//+OR</span><span+class="pln">
$</span><span+class="pun">.</span><span+class="pln">getAttrs</span><span+class="pun">(</span><span+class="pln">elm</span><span+class="pun">);</span></code></pre>

<p>You+can+also+add+a+second+string+param+for+getting+just+one+specific+attr.+This+isn't+really+needed+for+one+element+selection,+as+jQuery+already+provides+<code>$(elm).attr('name')</code>,+however,+my+version+of+a+plugin+allows+for+multiple+returns.+So,+for+instance,+a+call+like</p>

<pre+class="default+prettyprint+prettyprinted"><code><span+class="pln">$</span><span+class="pun">.</span><span+class="pln">getAttrs</span><span+class="pun">(</span><span+class="str">'*'</span><span+class="pun">,</span><span+class="pln">+</span><span+class="str">'class'</span><span+class="pun">);</span></code></pre>

<p>Will+result+in+an+array+<code>[]</code>+return+of+objects+<code>{}</code>.+Each+object+will+look+like:</p>

<pre+class="default+prettyprint+prettyprinted"><code><span+class="pun">{</span><span+class="pln">+</span><span+class="kwd">class</span><span+class="pun">:</span><span+class="pln">+</span><span+class="str">'classes+names'</span><span+class="pun">,</span><span+class="pln">+elm</span><span+class="pun">:</span><span+class="pln">+$</span><span+class="pun">(</span><span+class="pln">elm</span><span+class="pun">),</span><span+class="pln">+index</span><span+class="pun">:</span><span+class="pln">+i+</span><span+class="pun">}</span><span+class="pln">+</span><span+class="com">//+index+is+$(elm).index()</span></code></pre>
++++</div>
++</div>|1361539|1361540|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/235058/roland-bouman|1|https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery/27865269#answer-2048786|2|http://jsfiddle.net/SpYk3/ygxxLx27/^0|2J|N|0|D|0|E|6|1|0|0|0|1Q|J|0|0|5|2|A|2|0|0|0|0|0|0|0|0|8|2|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@$9|1S|A|1T|1|1U]|$9|1V|A|1W|1|1X]]|E|$]]|$1|F|3|G|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|20|8|@$9|21|A|22|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|23|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|24|8|@$9|25|A|26|B|C]|$9|27|A|28|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|29|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|2A|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|2B|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|2C|8|@]|D|@]|E|$]]|$1|10|3|11|5|J|7|2D|8|@]|D|@]|E|$K|L]]|$1|12|3|13|5|6|7|2E|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|2F|8|@]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|16|3|13|5|6|7|2J|8|@]|D|@]|E|$]]|$1|17|3|13|5|6|7|2K|8|@]|D|@]|E|$]]|$1|18|3|19|5|J|7|2L|8|@]|D|@]|E|$K|L]]|$1|1A|3|1B|5|J|7|2M|8|@]|D|@]|E|$K|L]]|$1|1C|3|13|5|6|7|2N|8|@]|D|@]|E|$]]|$1|1D|3|-4|5|6|7|2O|8|@]|D|@]|E|$]]]|1E|$1F|$5|1G|1H|1I|E|$1J|1K]]|1L|$5|1G|1H|1I|E|$1J|1M]]|1N|$5|1G|1H|1I|E|$1J|1O]]]]

<p><a href="https://stackoverflow.com/users/235058/roland-bouman">Roland Bouman</a>'s <a href="https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery/27865269#answer-2048786">answer</a> is the best, simple Vanilla way. I noticed some attempts at jQ plugs, but they just didn't seem "full" enough to me, so I made my own. The only setback so far has been inability to access dynamically added attrs without directly calling <code>elm.attr('dynamicAttr')</code>. However, this will return all natural attributes of a jQuery element object.</p>

<p>Plugin uses simple jQuery style calling:</p>

<pre><code>$(elm).getAttrs();
// OR
$.getAttrs(elm);
</code></pre>

<p>You can also add a second string param for getting just one specific attr. This isn't really needed for one element selection, as jQuery already provides <code>$(elm).attr('name')</code>, however, my version of a plugin allows for multiple returns. So, for instance, a call like</p>

<pre><code>$.getAttrs('*', 'class');
</code></pre>

<p>Will result in an array <code>[]</code> return of objects <code>{}</code>. Each object will look like:</p>

<pre><code>{ class: 'classes names', elm: $(elm), index: i } // index is $(elm).index()
</code></pre>

<h2>Plugin</h2>

<pre><code>;;(function($) {
    $.getAttrs || ($.extend({
        getAttrs: function() {
            var a = arguments,
                d, b;
            if (a.length)
                for (x in a) switch (typeof a[x]) {
                    case "object":
                        a[x] instanceof jQuery &amp;&amp; (b = a[x]);
                        break;
                    case "string":
                        b ? d || (d = a[x]) : b = $(a[x])
                }
            if (b instanceof jQuery) {
                var e = [];
                if (1 == b.length) {
                    for (var f = 0, g = b[0].attributes, h = g.length; f &lt; h; f++) a = g[f], e[a.name] = a.value;
                    b.data("attrList", e);
                    d &amp;&amp; "all" != d &amp;&amp; (e = b.attr(d))
                } else d &amp;&amp; "all" != d ? b.each(function(a) {
                    a = {
                        elm: $(this),
                        index: $(this).index()
                    };
                    a[d] = $(this).attr(d);
                    e.push(a)
                }) : b.each(function(a) {
                    $elmRet = [];
                    for (var b = 0, d = this.attributes, f = d.length; b &lt; f; b++) a = d[b], $elmRet[a.name] = a.value;
                    e.push({
                        elm: $(this),
                        index: $(this).index(),
                        attrs: $elmRet
                    });
                    $(this).data("attrList", e)
                });
                return e
            }
            return "Error: Cannot find Selector"
        }
    }), $.fn.extend({
        getAttrs: function() {
            var a = [$(this)];
            if (arguments.length)
                for (x in arguments) a.push(arguments[x]);
            return $.getAttrs.apply($, a)
        }
    }))
})(jQuery);
</code></pre>

<h2>Complied</h2>

<pre><code>;;(function(c){c.getAttrs||(c.extend({getAttrs:function(){var a=arguments,d,b;if(a.length)for(x in a)switch(typeof a[x]){case "object":a[x]instanceof jQuery&amp;&amp;(b=a[x]);break;case "string":b?d||(d=a[x]):b=c(a[x])}if(b instanceof jQuery){if(1==b.length){for(var e=[],f=0,g=b[0].attributes,h=g.length;f&lt;h;f++)a=g[f],e[a.name]=a.value;b.data("attrList",e);d&amp;&amp;"all"!=d&amp;&amp;(e=b.attr(d));for(x in e)e.length++}else e=[],d&amp;&amp;"all"!=d?b.each(function(a){a={elm:c(this),index:c(this).index()};a[d]=c(this).attr(d);e.push(a)}):b.each(function(a){$elmRet=[];for(var b=0,d=this.attributes,f=d.length;b&lt;f;b++)a=d[b],$elmRet[a.name]=a.value;e.push({elm:c(this),index:c(this).index(),attrs:$elmRet});c(this).data("attrList",e);for(x in $elmRet)$elmRet.length++});return e}return"Error: Cannot find Selector"}}),c.fn.extend({getAttrs:function(){var a=[c(this)];if(arguments.length)for(x in arguments)a.push(arguments[x]);return c.getAttrs.apply(c,a)}}))})(jQuery);
</code></pre>

<p><a href="http://jsfiddle.net/SpYk3/ygxxLx27/" rel="nofollow noreferrer"><h2>jsFiddle</h2></a></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/*  BEGIN PLUGIN  */
;;(function($) {
	$.getAttrs || ($.extend({
		getAttrs: function() {
			var a = arguments,
				c, b;
			if (a.length)
				for (x in a) switch (typeof a[x]) {
					case "object":
						a[x] instanceof f &amp;&amp; (b = a[x]);
						break;
					case "string":
						b ? c || (c = a[x]) : b = $(a[x])
				}
			if (b instanceof f) {
				if (1 == b.length) {
					for (var d = [], e = 0, g = b[0].attributes, h = g.length; e &lt; h; e++) a = g[e], d[a.name] = a.value;
					b.data("attrList", d);
					c &amp;&amp; "all" != c &amp;&amp; (d = b.attr(c));
					for (x in d) d.length++
				} else d = [], c &amp;&amp; "all" != c ? b.each(function(a) {
					a = {
						elm: $(this),
						index: $(this).index()
					};
					a[c] = $(this).attr(c);
					d.push(a)
				}) : b.each(function(a) {
					$elmRet = [];
					for (var b = 0, c = this.attributes, e = c.length; b &lt; e; b++) a = c[b], $elmRet[a.name] = a.value;
					d.push({
						elm: $(this),
						index: $(this).index(),
						attrs: $elmRet
					});
					$(this).data("attrList", d);
					for (x in $elmRet) $elmRet.length++
				});
				return d
			}
			return "Error: Cannot find Selector"
		}
	}), $.fn.extend({
		getAttrs: function() {
			var a = [$(this)];
			if (arguments.length)
				for (x in arguments) a.push(arguments[x]);
			return $.getAttrs.apply($, a)
		}
	}))
})(jQuery);
/*  END PLUGIN  */
/*--------------------*/
$('#bob').attr('bob', 'bill');
console.log($('#bob'))
console.log(new Array(50).join(' -'));
console.log($('#bob').getAttrs('id'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('#bob'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('#bob', 'name'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('*', 'class'));
console.log(new Array(50).join(' -'));
console.log($.getAttrs('p'));
console.log(new Array(50).join(' -'));
console.log($('#bob').getAttrs('all'));
console.log($('*').getAttrs('all'));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
All of below is just for stuff for plugin to test on. See developer console for more details.
&lt;hr /&gt;
&lt;div id="bob" class="wmd-button-bar"&gt;&lt;ul id="wmd-button-row-27865269" class="wmd-button-row" style="display:none;"&gt;
&lt;div class="post-text" itemprop="text"&gt;
&lt;p&gt;Roland Bouman's answer is the best, simple Vanilla way. I noticed some attempts at jQ plugs, but they just didn't seem "full" enough to me, so I made my own. The only setback so far has been inability to access dynamically added attrs without directly calling &lt;code&gt;elm.attr('dynamicAttr')&lt;/code&gt;. However, this will return all natural attributes of a jQuery element object.&lt;/p&gt;

&lt;p&gt;Plugin uses simple jQuery style calling:&lt;/p&gt;

&lt;pre class="default prettyprint prettyprinted"&gt;&lt;code&gt;&lt;span class="pln"&gt;$&lt;/span&gt;&lt;span class="pun"&gt;(&lt;/span&gt;&lt;span class="pln"&gt;elm&lt;/span&gt;&lt;span class="pun"&gt;).&lt;/span&gt;&lt;span class="pln"&gt;getAttrs&lt;/span&gt;&lt;span class="pun"&gt;();&lt;/span&gt;&lt;span class="pln"&gt;
&lt;/span&gt;&lt;span class="com"&gt;// OR&lt;/span&gt;&lt;span class="pln"&gt;
$&lt;/span&gt;&lt;span class="pun"&gt;.&lt;/span&gt;&lt;span class="pln"&gt;getAttrs&lt;/span&gt;&lt;span class="pun"&gt;(&lt;/span&gt;&lt;span class="pln"&gt;elm&lt;/span&gt;&lt;span class="pun"&gt;);&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You can also add a second string param for getting just one specific attr. This isn't really needed for one element selection, as jQuery already provides &lt;code&gt;$(elm).attr('name')&lt;/code&gt;, however, my version of a plugin allows for multiple returns. So, for instance, a call like&lt;/p&gt;

&lt;pre class="default prettyprint prettyprinted"&gt;&lt;code&gt;&lt;span class="pln"&gt;$&lt;/span&gt;&lt;span class="pun"&gt;.&lt;/span&gt;&lt;span class="pln"&gt;getAttrs&lt;/span&gt;&lt;span class="pun"&gt;(&lt;/span&gt;&lt;span class="str"&gt;'*'&lt;/span&gt;&lt;span class="pun"&gt;,&lt;/span&gt;&lt;span class="pln"&gt; &lt;/span&gt;&lt;span class="str"&gt;'class'&lt;/span&gt;&lt;span class="pun"&gt;);&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Will result in an array &lt;code&gt;[]&lt;/code&gt; return of objects &lt;code&gt;{}&lt;/code&gt;. Each object will look like:&lt;/p&gt;

&lt;pre class="default prettyprint prettyprinted"&gt;&lt;code&gt;&lt;span class="pun"&gt;{&lt;/span&gt;&lt;span class="pln"&gt; &lt;/span&gt;&lt;span class="kwd"&gt;class&lt;/span&gt;&lt;span class="pun"&gt;:&lt;/span&gt;&lt;span class="pln"&gt; &lt;/span&gt;&lt;span class="str"&gt;'classes names'&lt;/span&gt;&lt;span class="pun"&gt;,&lt;/span&gt;&lt;span class="pln"&gt; elm&lt;/span&gt;&lt;span class="pun"&gt;:&lt;/span&gt;&lt;span class="pln"&gt; $&lt;/span&gt;&lt;span class="pun"&gt;(&lt;/span&gt;&lt;span class="pln"&gt;elm&lt;/span&gt;&lt;span class="pun"&gt;),&lt;/span&gt;&lt;span class="pln"&gt; index&lt;/span&gt;&lt;span class="pun"&gt;:&lt;/span&gt;&lt;span class="pln"&gt; i &lt;/span&gt;&lt;span class="pun"&gt;}&lt;/span&gt;&lt;span class="pln"&gt; &lt;/span&gt;&lt;span class="com"&gt;// index is $(elm).index()&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1146893|text|假设您有一个如下所示的HTML元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1146894|<a+class="toc-item"
+++href="/books/n/ukhta2333/s5/"
+++id="book-link-29"
>
+++Chapter+5.+Conclusions+and+recommendations
</a>|code-block|syntax|javascript|1146895|获取它的所有属性的一种方法是将它们转换为数组：|1146896|const+el+=+document.getElementById("book-link-29")
const+attrArray+=+Array.from(el.attributes)

//+Now+you+can+iterate+all+the+attributes+and+do+whatever+you+need.
const+attributes+=+attrArray.reduce((attrs,+attr)+=>+{
++++attrs+!==+''+&&+(attrs+%2B=+'+')
++++attrs+%2B=+`${attr.nodeName}="${attr.nodeValue}"`
++++return+attrs
},+'')
console.log(attributes)|1146897|下面是您将获得的字符串(从示例中)，它包括所有属性：|1146898|class="toc-item"+href="/books/n/ukhta2333/s5/"+id="book-link-29"|1146899|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Imagine you've got an HTML element like below:</p>

<pre><code>&lt;a class="toc-item"
   href="/books/n/ukhta2333/s5/"
   id="book-link-29"
&gt;
   Chapter 5. Conclusions and recommendations
&lt;/a&gt;
</code></pre>

<p>One way you can get all attributes of it is to convert them into an array:</p>

<pre><code>const el = document.getElementById("book-link-29")
const attrArray = Array.from(el.attributes)

// Now you can iterate all the attributes and do whatever you need.
const attributes = attrArray.reduce((attrs, attr) =&gt; {
    attrs !== '' &amp;&amp; (attrs += ' ')
    attrs += `${attr.nodeName}="${attr.nodeValue}"`
    return attrs
}, '')
console.log(attributes)
</code></pre>

<p>And below is the string that what you'll get (from the example), which includes all attributes:</p>

<pre><code>class="toc-item" href="/books/n/ukhta2333/s5/" id="book-link-29"
</code></pre>


blocks|key|1361700|text|这有帮助吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361701|此属性为您将元素的所有属性返回到数组中。下面是一个例子。|1361702|​|1361703|window.addEventListener('load',+function()+{
++var+result+=+document.getElementById('result');
++var+spanAttributes+=+document.getElementsByTagName('span')[0].attributes;
++for+(var+i+=+0;+i+!=+spanAttributes.length;+i%2B%2B)+{
++++result.innerHTML+%2B=+spanAttributes[i].value+%2B+',';
++}
});|code-block|syntax|javascript|1361704|<span+name="test"+message="test2"></span>
<div+id="result"></div>|1361705|1361706|要获取多个元素的属性并对其进行组织，我建议对要循环的所有元素创建一个数组，然后为循环通过的每个元素的所有属性创建一个子数组。|1361707|这是一个脚本示例，它将遍历收集的元素并打印出两个属性。此脚本假设总是有两个属性，但您可以通过进一步的映射轻松解决这一问题。|1361708|1361709|window.addEventListener('load',function(){
++/*
++collect+all+the+elements+you+want+the+attributes
++for+into+the+variable+"elementsToTrack"
++*/+
++var+elementsToTrack+=+$('body+span,+body+div');
++//variable+to+store+all+attributes+for+each+element
++var+attributes+=+[];
++//gather+all+attributes+of+selected+elements
++for(var+i+=+0;+i+!=+elementsToTrack.length;+i%2B%2B){
++++var+currentAttr+=+elementsToTrack[i].attributes;
++++attributes.push(currentAttr);
++}
++
++//print+out+all+the+attrbute+names+and+values
++var+result+=+document.getElementById('result');
++for(var+i+=+0;+i+!=+attributes.length;+i%2B%2B){
++++result.innerHTML+%2B=+attributes[i][0].name+%2B+',+'+%2B+attributes[i][0].value+%2B+'+%7C+'+%2B+attributes[i][1].name+%2B+',+'+%2B+attributes[i][1].value+%2B'<br>';++
++}
});|1361710|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span+name="test"+message="test2"></span>
<span+name="test"+message="test2"></span>
<span+name="test"+message="test2"></span>
<span+name="test"+message="test2"></span>
<span+name="test"+message="test2"></span>
<span+name="test"+message="test2"></span>
<span+name="test"+message="test2"></span>
<div+name="test"+message="test2"></div>
<div+name="test"+message="test2"></div>
<div+name="test"+message="test2"></div>
<div+name="test"+message="test2"></div>
<div+id="result"></div>|1361711|1361712|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|16|8|@]|9|@]|A|$]]|$1|R|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|W|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Y|$]]

<p>Does this help?</p>

<p>This property returns all the attributes of an element into an array for you. Here is an example.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('load', function() {
  var result = document.getElementById('result');
  var spanAttributes = document.getElementsByTagName('span')[0].attributes;
  for (var i = 0; i != spanAttributes.length; i++) {
    result.innerHTML += spanAttributes[i].value + ',';
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;div id="result"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>To get the attributes of many elements and organize them, I suggest making an array of all the elements that you want to loop through and then create a sub array for all the attributes of each element looped through.</p>

<p>This is an example of a script that will loop through the collected elements and print out two attributes. This script assumes that there will always be two attributes but you can easily fix this with further mapping.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('load',function(){
  /*
  collect all the elements you want the attributes
  for into the variable "elementsToTrack"
  */ 
  var elementsToTrack = $('body span, body div');
  //variable to store all attributes for each element
  var attributes = [];
  //gather all attributes of selected elements
  for(var i = 0; i != elementsToTrack.length; i++){
    var currentAttr = elementsToTrack[i].attributes;
    attributes.push(currentAttr);
  }
  
  //print out all the attrbute names and values
  var result = document.getElementById('result');
  for(var i = 0; i != attributes.length; i++){
    result.innerHTML += attributes[i][0].name + ', ' + attributes[i][0].value + ' | ' + attributes[i][1].name + ', ' + attributes[i][1].value +'&lt;br&gt;';  
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;span name="test" message="test2"&gt;&lt;/span&gt;
&lt;div name="test" message="test2"&gt;&lt;/div&gt;
&lt;div name="test" message="test2"&gt;&lt;/div&gt;
&lt;div name="test" message="test2"&gt;&lt;/div&gt;
&lt;div name="test" message="test2"&gt;&lt;/div&gt;
&lt;div id="result"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1361891|text|试试这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361892|++++<div+id=foo+[href]="url"+class+(click)="alert('hello')"+data-hello=world></div>|code-block|syntax|javascript|1361893|然后获取所有属性|1361894|++++const+foo+=+document.getElementById('foo');
++++//+or+if+you+have+a+jQuery+object
++++//+const+foo+=+$('#foo')[0];

++++function+getAttributes(el)+{
++++++++const+attrObj+=+{};
++++++++if(!el.hasAttributes())+return+attrObj;
++++++++for+(const+attr+of+el.attributes)
++++++++++++attrObj[attr.name]+=+attr.value;
++++++++return+attrObj
++++}

++++//+{"id":"foo","[href]":"url","class":"","(click)":"alert('hello')","data-hello":"world"}
++++console.log(getAttributes(foo));|1361895|对于属性数组，请使用|1361896|++++//+["id","[href]","class","(click)","data-hello"]
++++Object.keys(getAttributes(foo))|1361897|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Try something like this</p>

<pre><code>    &lt;div id=foo [href]="url" class (click)="alert('hello')" data-hello=world&gt;&lt;/div&gt;
</code></pre>

<p>and then get all attributes</p>

<pre><code>    const foo = document.getElementById('foo');
    // or if you have a jQuery object
    // const foo = $('#foo')[0];

    function getAttributes(el) {
        const attrObj = {};
        if(!el.hasAttributes()) return attrObj;
        for (const attr of el.attributes)
            attrObj[attr.name] = attr.value;
        return attrObj
    }

    // {"id":"foo","[href]":"url","class":"","(click)":"alert('hello')","data-hello":"world"}
    console.log(getAttributes(foo));
</code></pre>

<p>for array of attributes use </p>

<pre><code>    // ["id","[href]","class","(click)","data-hello"]
    Object.keys(getAttributes(foo))
</code></pre>


blocks|key|1362058|text|属性到对象的转换|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1362059|*要求:+lodash|1362060|function+getAttributes(element,+parseJson=false){
++++let+results+=+{}
++++for+(let+i+=+0,+n+=+element.attributes.length;+i+<+n;+i%2B%2B){
++++++++let+key+=+element.attributes[i].nodeName.replace('-',+'.')
++++++++let+value+=+element.attributes[i].nodeValue
++++++++if(parseJson){
++++++++++++try{
++++++++++++++++if(_.isString(value))
++++++++++++++++value+=+JSON.parse(value)
++++++++++++}+catch(e)+{}
++++++++}
++++++++_.set(results,+key,+value)
++++}
++++return+results
}|code-block|syntax|javascript|1362061|这会将所有html属性转换为嵌套对象|1362062|示例：<div+custom-nested-path1="value1"+custom-nested-path2="value2"></div>|offset|length|style|CODE|1362063|结果：{custom:{nested:{path1:"value1",path2:"value2"}}}|1362064|如果parseJson设置为true，则JSON值将转换为对象|1362065|entityMap^0|0|0|0|0|3|1X|0|3|1D|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@$M|14|N|15|O|P]]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

<p>Attributes to Object conversion</p>

<p>*Requires: lodash</p>

<pre><code>function getAttributes(element, parseJson=false){
    let results = {}
    for (let i = 0, n = element.attributes.length; i &lt; n; i++){
        let key = element.attributes[i].nodeName.replace('-', '.')
        let value = element.attributes[i].nodeValue
        if(parseJson){
            try{
                if(_.isString(value))
                value = JSON.parse(value)
            } catch(e) {}
        }
        _.set(results, key, value)
    }
    return results
}
</code></pre>

<p>This will convert all html attributes to a nested object</p>

<p>Example HTML: <code>&lt;div custom-nested-path1="value1" custom-nested-path2="value2"&gt;&lt;/div&gt;</code></p>

<p>Result: <code>{custom:{nested:{path1:"value1",path2:"value2"}}}</code></p>

<p>If parseJson is set to true json values will be converted to objects</p>


blocks|key|1361909|text|Element.prototype.getA+=+function+(a)+{
++++++++if+(a)+{
++++++++++++return+this.getAttribute(a);
++++++++}+else+{
++++++++++++var+o+=+{};
++++++++++++for(let+a+of+this.attributes){
++++++++++++++++o[a.name]=a.value;
++++++++++++}
++++++++++++return+o;
++++++++}
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1361910|拥有<div+id="mydiv"+a='1'+b='2'>...</div>可以使用|unstyled|offset|length|style|CODE|1361911|mydiv.getA()+//+{id:"mydiv",a:'1',b:'2'}|1361912|entityMap^0|0|2|11|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@$G|Q|H|R|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>Element.prototype.getA = function (a) {
        if (a) {
            return this.getAttribute(a);
        } else {
            var o = {};
            for(let a of this.attributes){
                o[a.name]=a.value;
            }
            return o;
        }
    }
</code></pre>

<p>having <code>&lt;div id="mydiv" a='1' b='2'&gt;...&lt;/div&gt;</code>
can use</p>

<pre><code>mydiv.getA() // {id:"mydiv",a:'1',b:'2'}
</code></pre>


blocks|key|1361215|text|在javascript中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1361216|var+attributes;
var+spans+=+document.getElementsByTagName("span");
for(var+s+in+spans){
++if+(spans[s].getAttribute('name')+===+'test')+{
+++++attributes+=+spans[s].attributes;
+++++break;
++}
}|code-block|syntax|javascript|1361217|要访问属性名称和值，请执行以下操作：|1361218|attributes[0].nodeName
attributes[0].nodeValue|1361219|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In javascript:</p>

<pre><code>var attributes;
var spans = document.getElementsByTagName("span");
for(var s in spans){
  if (spans[s].getAttribute('name') === 'test') {
     attributes = spans[s].attributes;
     break;
  }
}
</code></pre>

<p>To access the attributes names and values:</p>

<pre><code>attributes[0].nodeName
attributes[0].nodeValue
</code></pre>


<p>I want to put all attributes in a Html element into an array:
like i have a jQuery Object, whichs html looks like this:</p>

<pre><code>&lt;span name="test" message="test2"&gt;&lt;/span&gt;
</code></pre>

<p>now one way is to use the xml parser described <a href="https://stackoverflow.com/questions/1705504/javascript-jquery-how-do-i-get-an-array-of-all-attributes-in-an-xml-element">here</a>, but then i need to know how to get the html code of my object.</p>

<p>the other way is to make it with jquery, but how?
the number of attributes and the names are generic.</p>

<p>Thanks</p>

<p>Btw: I can't access the element with document.getelementbyid or something similar.</p>


Get all Attributes from a HTML element with Javascript/jQuery

jQuery

JSON

我想把一个Html元素中的所有属性放入一个数组中:就像我有一个jQuery对象，它的html看起来像这样：<span name="test" message="test2"></span>现在，一种方法是使用描述为的xml解析器，然后我需要知道如何获得我的对象的html代码。另一种方法是使用jquery，但如何实现呢？属性的数量和名称是通用的。谢谢顺便说一下:我不能用document.getele

问使用Javascript/jQuery从HTML元素获取所有属性
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript/jQuery从HTML元素获取所有属性EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript/jQuery从HTML元素获取所有属性
EN