157 votos

Obtener todos los atributos de un elemento HTML con Javascript/jQuery

Quiero poner todos los atributos de un elemento Html en un array: como yo tengo un Objeto jQuery, whichs html se parece a esto:

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

ahora es una forma de utilizar el analizador de xml se describe aquí, pero entonces necesito saber como obtener el código html de mi objeto.

la otra forma es hacerlo con jquery, pero ¿cómo? la cantidad de atributos y los nombres son genéricos.

Gracias

Btw: no puede acceder al elemento con el documento.getelementbyid o algo similar.

199voto

Roland Bouman Puntos 15226

Si sólo quieres los atributos DOM, es probablemente más fácil usar la attributes lista de nodos en el propio elemento:

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

Tenga en cuenta que esto llena el array con los nombres de atributos. Si usted necesita el valor del atributo, puede utilizar la nodeValue característica:

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

70voto

manRo Puntos 787

Puede usar este plugin sencillo como $('#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);

55voto

Aki143S Puntos 489
SIMPLE

19voto

DUzun Puntos 355

Porque en IE7 elem.attributes enumera todos los atributos posibles, no sólo los actuales, tenemos que probar el valor del atributo. Este plugin funciona en todos los principales navegadores:

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

Uso:

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

18voto

Eduardo Cuomo Puntos 1433

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

Uso:

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

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: