使用 Javascript/jQuery 从 HTML 元素获取所有属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2048720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get all Attributes from a HTML element with Javascript/jQuery
提问by k0ni
I want to put all attributes in a Html element into an array: like i have a jQuery Object, whichs html looks like this:
我想将 Html 元素中的所有属性放入一个数组中：就像我有一个 jQuery 对象，其 html 如下所示：
<span name="test" message="test2"></span>
now one way is to use the xml parser described here, but then i need to know how to get the html code of my object.
现在一种方法是使用这里描述的 xml 解析器，但是我需要知道如何获取我的对象的 html 代码。
the other way is to make it with jquery, but how? the number of attributes and the names are generic.
另一种方法是用 jquery 来实现，但是怎么做呢？属性的数量和名称是通用的。
Thanks
谢谢
Btw: I can't access the element with document.getelementbyid or something similar.
顺便说一句：我无法使用 document.getelementbyid 或类似的东西访问该元素。
回答by Roland Bouman
If you just want the DOM attributes, it's probably simpler to use the attributesnode list on the element itself:
如果您只需要 DOM 属性，那么attributes在元素本身上使用节点列表可能更简单：
var el = document.getElementById("someId");
for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++){
arr.push(atts[i].nodeName);
}
Note that this fills the array only with attribute names. If you need the attribute value, you can use the nodeValueproperty:
请注意，这仅使用属性名称填充数组。如果需要属性值，可以使用该nodeValue属性：
var nodes=[], values=[];
for (var att, i = 0, atts = el.attributes, n = atts.length; i < n; i++){
att = atts[i];
nodes.push(att.nodeName);
values.push(att.nodeValue);
}
回答by manRo
You can use this simple plugin as $('#some_id').getAttributes();
你可以使用这个简单的插件作为 $('#some_id').getAttributes();
(function($) {
$.fn.getAttributes = function() {
var attributes = {};
if( this.length ) {
$.each( this[0].attributes, function( index, attr ) {
attributes[ attr.name ] = attr.value;
} );
}
return attributes;
};
})(jQuery);
回答by Aki143S
Simple:
简单的：
var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});
回答by DUzun
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:
因为在 IE7 中 elem.attributes 列出了所有可能的属性，不仅仅是当前的，我们必须测试属性值。此插件适用于所有主要浏览器：
(function($) {
$.fn.getAttributes = function () {
var elem = this,
attr = {};
if(elem && 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 && v !== false) attr[n] = v
})
return attr
}
})(jQuery);
Usage:
用法：
var attribs = $('#some_id').getAttributes();
回答by Eduardo Cuomo
Setter and Getter!
二传手和吸气剂！
(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);
Use:
用：
// Setter
$('#element').attrs({
'name' : 'newName',
'id' : 'newId',
'readonly': true
});
// Getter
var attrs = $('#element').attrs();
回答by gfullam
Use .sliceto convert the attributesproperty to Array
使用.slice该转换attributes属性阵列
The attributesproperty of DOM nodes is a NamedNodeMap, which is an Array-like object.
attributesDOM 节点的属性是 a NamedNodeMap，它是一个类数组对象。
An Array-like object is an object which has a lengthproperty and whose property names are enumerated, but otherwise has its own methods and does not inherit from Array.prototype
类数组对象是具有length属性且属性名称被枚举的对象，但在其他方面具有自己的方法且不继承自Array.prototype
The slicemethod can be used to convert Array-like objects to a new Array.
该slice方法可用于将类似 Array 的对象转换为新的 Array。
var elem = document.querySelector('[name=test]'),
attrs = Array.prototype.slice.call(elem.attributes);
console.log(attrs);<span name="test" message="test2">See console.</span>回答by KevBot
This approach works well if you need to get all the attributes with name and value in objects returned in an array.
如果您需要在数组中返回的对象中获取具有名称和值的所有属性，则此方法很有效。
Example output:
示例输出：
[
{
name: 'message',
value: 'test2'
}
...
]
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);<span name="test" message="test2"></span>If you want only an array of attribute names for that element, you can just map the results:
如果您只需要该元素的属性名称数组，则只需映射结果：
var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]
回答by Przemek
Much more concise ways to do it:
更简洁的方法来做到这一点：
Old way (IE9+):
旧方式（IE9+）：
var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });
ES6 way (Edge 12+):
ES6 方式（Edge 12+）：
[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);
document.querySelector()returns the first Elementwithin the document that matches the specified selector.Element.attributesreturns a NamedNodeMapobject containing the assigned attributes of the corresponding HTML element.[].map()creates a new array with the results of calling a provided function on every element in the calling array.
document.querySelector()返回文档中与指定选择器匹配的第一个元素。Element.attributes返回一个NamedNodeMap对象，其中包含相应 HTML 元素的指定属性。[].map()使用对调用数组中的每个元素调用提供的函数的结果创建一个新数组。
Demo:
演示：
console.log(
[...document.querySelector('img').attributes].map(attr => attr.nodeName)
);/* Output console formatting */
.as-console-wrapper { position: absolute; top: 0; }<img src="…" alt="…" height="…" width="…"/>回答by SpYk3HH
Roland Bouman's answeris 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 elm.attr('dynamicAttr'). However, this will return all natural attributes of a jQuery element object.
Roland Bouman的答案是最好的，简单的香草方式。我注意到 jQ 插件的一些尝试，但它们对我来说似乎不够“完整”，所以我自己做了。迄今为止唯一的挫折是无法在不直接调用elm.attr('dynamicAttr'). 但是，这将返回 jQuery 元素对象的所有自然属性。
Plugin uses simple jQuery style calling:
插件使用简单的 jQuery 风格调用：
$(elm).getAttrs();
// OR
$.getAttrs(elm);
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 $(elm).attr('name'), however, my version of a plugin allows for multiple returns. So, for instance, a call like
您还可以添加第二个字符串参数以仅获取一个特定的属性。这对于一个元素选择来说并不是真正需要的，因为 jQuery 已经提供了$(elm).attr('name')，但是，我的插件版本允许多次返回。所以，例如，像这样的电话
$.getAttrs('*', 'class');
Will result in an array []return of objects {}. Each object will look like:
将导致[]对象的数组返回{}。每个对象将如下所示：
{ class: 'classes names', elm: $(elm), index: i } // index is $(elm).index()
Plugin
插入
;;(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 && (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 < h; f++) 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++) 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);
Complied
符合
;;(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&&(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<h;f++)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++}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++)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);
jsFiddle
js小提琴
/* 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 && (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 < h; e++) 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++
} 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++) 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'));<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>回答by www139
Does this help?
这有帮助吗？
This property returns all the attributes of an element into an array for you. Here is an example.
此属性为您将元素的所有属性返回到数组中。这是一个例子。
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 + ',';
}
});<span name="test" message="test2"></span>
<div id="result"></div>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.
为了获取许多元素的属性并组织它们，我建议创建一个包含要循环的所有元素的数组，然后为每个循环的元素的所有属性创建一个子数组。
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.
这是一个脚本示例，它将遍历收集的元素并打印出两个属性。此脚本假定始终有两个属性，但您可以通过进一步映射轻松解决此问题。
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 +'<br>';
}
});<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>