Obter todos os atributos de um elemento HTML com Javascript / jQuery

161

Eu quero colocar todos os atributos em um elemento HTML em uma matriz: como se eu tivesse um objeto jQuery, que é html se parece com isso:

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

Agora, uma maneira é usar o analisador xml descrito aqui , mas então preciso saber como obter o código html do meu objeto.

a outra maneira é fazê-lo com jquery, mas como? o número de atributos e os nomes são genéricos.

obrigado

Btw: Não consigo acessar o elemento com document.getelementbyid ou algo semelhante.

javascript jquery attributes parsing k0ni
fonte

Respostas:

218

Se você deseja apenas os atributos DOM, provavelmente é mais simples usar a attributeslista de nós no próprio 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);
}

Observe que isso preenche a matriz apenas com nomes de atributos. Se você precisar do valor do atributo, poderá usar a nodeValuepropriedade:

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);
}
Roland Bouman
fonte
O problema é que não posso usar getElementById, é um objeto jquery. existe uma maneira que eu possa fazer getelementbyclassname dentro de um contexto como no jquery?
k0ni
4
Você pode usar getElementById-var el = document.getElementById($(myObj).attr("id"));
Sampson
45
Você pode obter o objeto DOM de um objeto jQuery através do getmétodo ... por exemplo:var obj = $('#example').get(0);
Matt Huggins
3
@ k0ni - você poderia usar, por exemplo, var atts = $ (myObject) [0] .attributes; ?
22811 Ralph Cowling
12
Aviso: no IE isso não recebe apenas especificado, mas todos os possíveis atributos
Alexey Lebedev
70

Você pode usar este plugin simples 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);
manRo
fonte
4
FYI: Isso expõe apenas o primeiro elemento do seletor.
Brett Veenstra 06/03/2013
Eu testei e funciona com atributos adicionados dinamicamente (cromo)
CodeToad
57

Simples:

var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});
Aki143S
fonte
Alguma desvantagem disso?
RZR
7
Attr.nodeValuefoi preterido em favor de value, diz o Google Chrome. Então poderia ser this.name + ':' + this.value. A interface Attr
Thai
20

Como no IE7, elem.attributes lista todos os atributos possíveis, não apenas os atuais, temos que testar o valor do atributo. Este plugin funciona em todos os principais 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();
DUzun
fonte
1
O erro de digitação neste - el.get (0) na linha 6 deve ser elem.get (0).
Graham Charles
Da minha experiência agora, isso é realmente um pouco mais complexo do que isso. Pelo menos em alguns casos. Por exemplo, isso incluirá um atributo chamado 'dataFld' com o valor 'null' (valor da sequência) ou o excluiria?
mightyiam
Ele não funciona com propriedades adicionadas dinamicamente, porque as propriedades e os atributos nem sempre estão sincronizados.
DUzun
18

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

Usar:

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

// Getter
var attrs = $('#element').attrs();
Eduardo Cuomo
fonte
2
Bom, eu gosto mais desta resposta. Se encaixa perfeitamente bem com jQuery.attr.
Scott Rippey 12/02
1
Duas recomendações: Você pode atualizar para usar nomes de variáveis ​​"não minificados"? E vejo que você está usando jQuery.attro levantador, mas provavelmente seria benéfico usá-lo também.
Scott Rippey 12/02
Além disso, coisa pequena - não deve haver um ponto-e-vírgula após a primeira declaração for ().
jbyrd
6

Use .slicepara converter a attributespropriedade em Matriz

A attributespropriedade dos nós DOM é a NamedNodeMap, que é um objeto semelhante a uma matriz.

Um objeto semelhante a uma matriz é um objeto que possui uma lengthpropriedade e cujos nomes de propriedades são enumerados, mas, de outro modo, possui métodos próprios e não herda deArray.prototype

O slicemétodo pode ser usado para converter objetos do tipo Array em um novo 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>
Expandir snippet

gfullam
fonte
1
Ele irá retornar matriz de objetos e não de nomes de atributos como cordas, embora
Przemek
1
O OP não especificou uma matriz de nomes como seqüências de caracteres: "Quero colocar todos os atributos em um elemento Html em uma matriz". Isso faz isso.
gfullam
OK, faz sentido #
0110 Przemek
1
Ao iterar sobre os itens attrs, você pode acessar o nome do atributo com a namepropriedade no item.
tyler.frankenstein
3

Essa abordagem funciona bem se você precisar obter todos os atributos com nome e valor nos objetos retornados em uma matriz.

Exemplo de saída:

[
    {
        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>
Expandir snippet

Se você deseja apenas uma matriz de nomes de atributos para esse elemento, basta mapear os resultados:

var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]
KevBot
fonte
2

A resposta de Roland Bouman é a melhor e mais simples maneira de baunilha. Notei algumas tentativas de plugues jQ, mas eles simplesmente não pareciam "cheios" o suficiente para mim, então fiz o meu. Até agora, o único contratempo foi a incapacidade de acessar atributos adicionados dinamicamente sem chamar diretamente elm.attr('dynamicAttr'). No entanto, isso retornará todos os atributos naturais de um objeto de elemento jQuery.

O plug-in usa chamadas simples no estilo jQuery:

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

Você também pode adicionar um segundo parâmetro de string para obter apenas um atributo específico. Isso realmente não é necessário para a seleção de um elemento, pois o jQuery já fornece $(elm).attr('name'), no entanto, minha versão de um plugin permite vários retornos. Então, por exemplo, uma ligação como

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

Irá resultar em um []retorno de matriz de objetos {}. Cada objeto será parecido com:

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

Plugar

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

Cumprida

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

Mostrar snippet de código

SpYk3HH
fonte
2

Formas muito mais concisas de fazer isso:

Caminho antigo (IE9 +):

var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });

Maneira ES6 (Edge 12+):

[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);

Demo:

Mostrar snippet de código

Przemek
fonte
1

Isso ajuda?

Esta propriedade retorna todos os atributos de um elemento em uma matriz para você. Aqui está um exemplo.

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>
Expandir snippet

Para obter os atributos de muitos elementos e organizá-los, sugiro criar uma matriz de todos os elementos pelos quais você deseja fazer um loop e criar uma sub-matriz para todos os atributos de cada elemento.

Este é um exemplo de script que percorrerá os elementos coletados e imprimirá dois atributos. Esse script pressupõe que sempre haverá dois atributos, mas você pode corrigi-lo facilmente com mapeamento adicional.

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>
Expandir snippet

www139
fonte
1

Todas as respostas aqui estão faltando a solução mais simples usando o método do elemento getAttributeNames !

Ele recupera os nomes de todos os atributos atuais do elemento como uma Matriz regular, que você pode reduzir a um bom objeto de chaves / valores.

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>
Expandir snippet

Tim Kindberg
fonte
1

Imagine que você tem um elemento HTML como abaixo:

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

Uma maneira de obter todos os atributos é convertê-los em uma matriz:

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)

E abaixo está a string que você obterá (do exemplo), que inclui todos os atributos:

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

Tente algo como isto

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

e depois obter todos os atributos

    const foo = document.getElementById('foo');
    // or if you have a jQuery object
    // const foo = $('#foo')[0];

    function getAttributes(el) {
        const attrObj = {};
        if(!el.hasAttributes()) return attrObj;
        for (const attr of el.attributes)
            attrObj[attr.name] = attr.value;
        return attrObj
    }

    // {"id":"foo","[href]":"url","class":"","(click)":"alert('hello')","data-hello":"world"}
    console.log(getAttributes(foo));

para matriz de atributos use 

    // ["id","[href]","class","(click)","data-hello"]
    Object.keys(getAttributes(foo))
weroro
fonte
0 
Element.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;
        }
    }

tendo <div id="mydiv" a='1' b='2'>...</div> pode usar

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

Muito simples. Você só precisa fazer um loop sobre o elemento de atributos e enviar seus nodeValues ​​para uma matriz:

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

let arr = Array();

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

Se desejar o nome do atributo, você pode substituir 'nodeValue' por 'nodeName'.

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

let arr = Array();

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

Atributos para conversão de objeto

* Requer: lodash

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
}

Isso converterá todos os atributos html em um objeto aninhado

Exemplo de HTML: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>

Resultado: {custom:{nested:{path1:"value1",path2:"value2"}}}

Se parseJson estiver definido como true, os valores json serão convertidos em objetos

Dieter Gribnitz
fonte
-8

Em javascript:

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

Para acessar os nomes e valores dos atributos:

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

fonte
Atravessar todos os elementos do vão seria muito lento
0-0