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

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

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

现在，一种方法是使用所描述的xml解析器，但是我需要知道如何获取对象的html代码

另一种方法是使用jquery实现，但是如何实现呢？ 属性的数量和名称是通用的

谢谢

---

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

如果您只需要DOM属性，那么在元素本身上使用

属性
节点列表可能更简单：

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

在javascript中：

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

要访问属性名称和值，请执行以下操作：

attributes[0].nodeName
attributes[0].nodeValue

您可以使用这个简单的插件作为$（'#some_id'）.getAttributes（）

简单：

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

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

塞特和盖特

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

使用：

这是最好的，简单的香草方式。我注意到一些jQ插头的尝试，但它们对我来说似乎不够“满”，所以我做了自己的。到目前为止，唯一的挫折是无法在不直接调用
elm.attr（'dynamicAttr'）
的情况下访问动态添加的attr。但是，这将返回jQuery元素对象的所有自然属性

插件使用简单的jQuery风格调用：

$(elm).getAttrs();
// OR
$.getAttrs(elm);

您还可以添加第二个字符串参数，以便仅获取一个特定属性。对于一个元素的选择，实际上并不需要这样做，因为jQuery已经提供了
$（elm）.attr（'name'）
，但是，我的插件版本允许多次返回。例如，一个像

$.getAttrs('*', 'class');

将导致数组
[]
返回对象
{}
。每个对象的外观如下所示：

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

插件
您还可以添加第二个字符串参数，以便仅获取一个特定属性。对于一个元素的选择，实际上并不需要这样做，因为jQuery已经提供了
$（elm）.attr（'name'）
，但是，我的插件版本允许多次返回。例如，一个像

$.getAttrs('*', 'class');

$.getAttrs（'*'，'class'）
将导致数组
[]
返回对象
{}
。每个对象的外观如下所示：

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

{class:'classes names'，elm:$（elm），index:i}//索引是$（elm）。index（）
使用
.slice
将
属性转换为数组
DOM节点的
attributes
属性是一个类似数组的对象

类似数组的对象是具有
length
属性且其属性名称被枚举的对象，但在其他情况下具有自己的方法且不从中继承



var elem=document.querySelector（“[name=test]”），
attrs=Array.prototype.slice.call（elem.attributes）；
控制台日志（attrs）
请参阅控制台。
这有帮助吗

此属性将元素的所有属性返回到数组中。这里有一个例子


window.addEventListener（'load'，function（）{
var result=document.getElementById（'result'）；
var spanAttributes=document.getElementsByTagName（'span'）[0]。属性；
对于（var i=0；i！=spanAttributes.length；i++）{
result.innerHTML+=spanAttributes[i].value+'，'；
}
});
如果需要在数组中返回的对象中获取所有具有名称和值的属性，则此方法非常有效

示例输出：

[
    {
        name: 'message',
        value: 'test2'
    }
    ...
]


函数getElementAttrs（el）{
return[].slice.call（el.attributes）.map（（attr）=>{
返回{
名称：attr.name，
值：attr.value
}
});
}
var allAttrs=getElementAttrs（document.querySelector（'span'）；
控制台日志（allAttrs）
更简洁的方法：


老路（IE9+）：
ES6路（边缘12+）：

返回文档中与指定选择器匹配的第一个
返回包含相应HTML元素的指定属性的对象
使用对调用数组中的每个元素调用提供的函数的结果创建一个新数组

演示：

console.log(
[…document.querySelector（'img'）.attributes].map（attr=>attr.nodeName）
);
/*输出控制台格式化*/
.as控制台包装{位置：绝对；顶部：0；}
这里的每个答案都缺少使用元素方法的最简单解决方案

它以常规数组的形式检索所有元素当前属性的名称，然后您可以将其简化为一个包含键/值的漂亮对象


const getAllAttributes=el=>el
.getAttributeNames（）
.reduce（（对象，名称）=>({
…obj，
[名称]：el.getAttribute（名称）
}), {})
console.log（getAllAttribute（document.querySelector（'div'））
试试这样的方法

    <div id=foo [href]="url" class (click)="alert('hello')" data-hello=world></div>

对于属性数组，请使用

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

有
…
可以使用

假设您有一个如下所示的HTML元素：

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

下面是您将得到的字符串（从示例中），其中包括所有属性：

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

很简单。您只需在attributes元素上循环，并将其nodeValue推送到数组中：

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 += ' ')
    attrs += `${attr.nodeName}="${attr.nodeValue}"`
    return attrs
}, '')
console.log(attributes)

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

let arr = Array();

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

let att=document.getElementById（'id'）；
设arr=Array（）；
for（设i=0；i

如果需要属性的名称，可以将“nodeName”替换为“nodeValue”

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

let arr = Array();

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

let att=document.getElementById（'id'）；
设arr=Array（）；
for（设i=0；i
属性到对象的转换

*要求：洛达斯

function getAttributes(element, parseJson=false){
    let results = {}
    for (let i = 0, n = element.attributes.length; i < 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
}

函数getAttributes（元素，parseJson=false）{
让结果={}
for（设i=0，n=element.attributes.length；iElement.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;
        }
    }

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

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

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 += ' ')
    attrs += `${attr.nodeName}="${attr.nodeValue}"`
    return attrs
}, '')
console.log(attributes)

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

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

let arr = Array();

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

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

let arr = Array();

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

function getAttributes(element, parseJson=false){
    let results = {}
    for (let i = 0, n = element.attributes.length; i < 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
}