Obtenir tous les attributs d'un élément HTML avec Javascript / jQuery

Question

Je veux mettre tous les attributs d'un élément Html dans un tableau: comme j'ai un Objet jQuery, html qui ressemble à ceci:

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

maintenant une façon est d'utiliser l'analyseur xml décrit ici, mais là j'ai besoin de savoir comment obtenir le code html de mon objet.

l'autre façon est de le faire avec jquery, mais comment? le montant des attributs et les noms génériques.

Merci

Btw: je ne peux pas accéder à l'élément avec le document.getelementbyid ou quelque chose de similaire.

Answer 1

Si vous voulez juste les attributs DOM, il est probablement plus simple d'utiliser la liste de nœuds attributes sur l'élément lui-même:

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

Notez que cela ne remplit le tableau qu'avec les noms d'attributs. Si vous avez besoin de la valeur de l'attribut, vous pouvez utiliser la propriété 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

Vous pouvez utiliser ce simple plugin comme $ ('# 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

Simple:

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

Answer 4

Parce que dans IE7 elem.attributes répertorie tous les attributs possibles, pas seulement les présents, nous devons tester la valeur de l'attribut. Ce plugin fonctionne dans tous les principaux navigateurs:

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

Answer 5

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

Utilisation:

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

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