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

Question

我想将一个Html元素中的所有属性放入一个数组:就像我有一个jQuery对象,其中html如下所示:

<span name="test" message="test2"></span>

现在一种方法是使用这里描述的xml解析器,但后来我需要知道如何获取我的对象的html代码.

另一种方法是使用jquery,但如何？属性的数量和名称是通用的.

谢谢

顺便说一句:我无法使用document.getelementbyid或类似的东西访问该元素.

Answer 1

如果您只想要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);
}

请注意,这仅使用属性名称填充数组.如果需要属性值,可以使用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);
}

Answer 2

你可以使用这个简单的插件作为$('#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);

Answer 3

简单:

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

Answer 4

因为在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);

用法:

var attribs = $('#some_id').getAttributes();

Answer 5

塞特和盖特!

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

使用:

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

// Getter
var attrs = $('#element').attrs();

Answer 6

很简单。你只需要遍历 attributes 元素并将它们的 nodeValues 推入一个数组：

let att = document.getElementById('id');

let arr = Array();

for (let i = 0; i < att.attributes.length; i++) {
    arr.push(att.attributes[i].nodeValue);
}

如果您想要属性的名称，您可以将 'nodeValue' 替换为 'nodeName'。

let att = document.getElementById('id');

let arr = Array();

for (let i = 0; i < att.attributes.length; i++) {
    arr.push(att.attributes[i].nodeName);
}

Answer 7

使用.slice该转换attributes属性阵列

attributesDOM节点的属性是a NamedNodeMap,它是一个类似于Array的对象.

类似Array的对象是一个对象,它具有一个length属性,其属性名称被枚举,但是有其自身的方法并且不从Array.prototype

该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>

Answer 8

更简洁的方法来做到这一点：

\n\n

老方法（IE9+）：

\n\n

var element = document.querySelector(/* \xe2\x80\xa6 */);\n[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });\n

\n\n

ES6方式（Edge 12+）：

\n\n

[...document.querySelector(/* \xe2\x80\xa6 */).attributes].map(attr => attr.nodeName);\n

\n\n

\n
• document.querySelector()返回文档中与指定选择器匹配的第一个元素。
\n
• Element.attributes返回一个NamedNodeMap对象，其中包含相应 HTML 元素的指定属性。
\n
• [].map()创建一个新数组，其中包含对调用数组中的每个元素调用所提供函数的结果。
\n

\n\n

演示：

\n\n

\r\n

\r\n

var element = document.querySelector(/* \xe2\x80\xa6 */);\n[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });\n

\r\n

[...document.querySelector(/* \xe2\x80\xa6 */).attributes].map(attr => attr.nodeName);\n

\r\n

console.log(\r\n  [...document.querySelector(\'img\').attributes].map(attr => attr.nodeName)\r\n);

\r\n

\r\n

\r\n

\n

Answer 9

这里的每个答案都缺少使用getAttributeNames元素方法的最简单解决方案！

它检索所有元素当前属性的名称作为常规数组，然后您可以将其简化为键/值的不错对象。

const getAllAttributes = el => el
  .getAttributeNames()
  .reduce((obj, name) => ({
    ...obj,
    [name]: el.getAttribute(name)
  }), {})

console.log(getAllAttributes(document.querySelector('div')))

<div title="hello" className="foo" data-foo="bar"></div>