Ottieni tutti gli attributi da un elemento HTML con Javascript / jQuery

Voglio mettere tutti gli attributi in un elemento Html in un array: come ho un object jQuery, che html assomiglia a questo:

 

ora un modo è quello di usare il parser xml qui descritto, ma poi ho bisogno di sapere come ottenere il codice html del mio object.

l’altro modo è farlo con jquery, ma come? il numero di attributi e i nomi sono generici.

Grazie

Btw: Non riesco ad accedere all’elemento con document.getelementbyid o qualcosa di simile.

    Se si desidera solo gli attributi DOM, è probabilmente più semplice utilizzare l’elenco di nodes attributes sull’elemento stesso:

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

    Si noti che questo riempie l'array solo con i nomi degli attributi. Se è necessario il valore dell'attributo, è ansible utilizzare la proprietà 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); } 

    Puoi usare questo semplice plugin come $ (‘# 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); 

    Semplice:

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

    Perché in IE7 elem.attributes elenca tutti i possibili attributi, non solo quelli attuali, dobbiamo testare il valore dell’attributo. Questo plugin funziona su tutti i principali browser:

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

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

    Uso:

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

    Usa .slice per convertire la proprietà attributes in Array

    La proprietà attributes dei nodes DOM è una NamedNodeMap , che è un object tipo Array.

    Un object Array-like è un object che ha una proprietà length e i cui nomi di proprietà sono enumerati, ma altrimenti ha i propri metodi e non eredita da Array.prototype

    Il metodo slice può essere utilizzato per convertire oggetti di tipo Array in una nuova matrice .

     var elem = document.querySelector('[name=test]'), attrs = Array.prototype.slice.call(elem.attributes); console.log(attrs); 
     See console. 

    La risposta di Roland Bouman è la migliore, semplice vaniglia. Ho notato alcuni tentativi con i connettori jQ, ma non mi sembravano abbastanza “pieni” per me, quindi ho creato il mio. L’unica battuta d’arresto finora è stata l’impossibilità di accedere ad attrs aggiunti dynamicmente senza chiamare direttamente elm.attr('dynamicAttr') . Tuttavia, questo restituirà tutti gli attributi naturali di un object elemento jQuery.

    Plugin usa una semplice chiamata in stile jQuery:

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

    Puoi anche aggiungere un secondo parametro di stringa per ottenere solo un attr specifico. Questo non è veramente necessario per una selezione di elementi, poiché jQuery fornisce già $(elm).attr('name') , tuttavia, la mia versione di un plugin consente di ottenere più resi. Quindi, per esempio, una chiamata come

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

    Risulterà in un array [] ritorno di oggetti {} . Ogni object sarà simile a:

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

    Colbind

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

    rispettato

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

    jsFiddle

     /* BEGIN PLUGIN */ ;;(function($) { $.getAttrs || ($.extend({ getAttrs: function() { var a = arguments, c, b; if (a.length) for (x in a) switch (typeof a[x]) { case "object": a[x] instanceof f && (b = a[x]); break; case "string": b ? c || (c = a[x]) : b = $(a[x]) } if (b instanceof f) { if (1 == b.length) { for (var d = [], e = 0, g = b[0].attributes, h = g.length; e < h; e++) a = g[e], d[a.name] = a.value; b.data("attrList", d); c && "all" != c && (d = b.attr(c)); for (x in d) d.length++ } else d = [], c && "all" != c ? b.each(function(a) { a = { elm: $(this), index: $(this).index() }; a[c] = $(this).attr(c); d.push(a) }) : b.each(function(a) { $elmRet = []; for (var b = 0, c = this.attributes, e = c.length; b < e; b++) a = c[b], $elmRet[a.name] = a.value; d.push({ elm: $(this), index: $(this).index(), attrs: $elmRet }); $(this).data("attrList", d); for (x in $elmRet) $elmRet.length++ }); return d } 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); /* END PLUGIN */ /*--------------------*/ $('#bob').attr('bob', 'bill'); console.log($('#bob')) console.log(new Array(50).join(' -')); console.log($('#bob').getAttrs('id')); console.log(new Array(50).join(' -')); console.log($.getAttrs('#bob')); console.log(new Array(50).join(' -')); console.log($.getAttrs('#bob', 'name')); console.log(new Array(50).join(' -')); console.log($.getAttrs('*', 'class')); console.log(new Array(50).join(' -')); console.log($.getAttrs('p')); console.log(new Array(50).join(' -')); console.log($('#bob').getAttrs('all')); console.log($('*').getAttrs('all')); 
      All of below is just for stuff for plugin to test on. See developer console for more details. 

    Questo approccio funziona bene se è necessario ottenere tutti gli attributi con nome e valore negli oggetti restituiti in un array.

    Esempio di output:

     [ { 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); 
      

    Modi molto più concisi per farlo:

    Vecchia via (IE9 +):

     var element = document.querySelector(/* https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery/… */); [].slice.call(element.attributes).map(function (attr) { return attr.nodeName; }); 

    Modo ES6 (Edge 12+):

     [...document.querySelector(/* https://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery/… */).attributes].map(attr => attr.nodeName); 
    • document.querySelector() restituisce il primo elemento all’interno del documento che corrisponde al selettore specificato.
    • Element.attributes restituisce un object NamedNodeMap contenente gli attributi assegnati dell’elemento HTML corrispondente.
    • [].map() crea una nuova matrice con i risultati della chiamata di una funzione fornita su ogni elemento dell’array chiamante.

    demo:

     console.log( [...document.querySelector('img').attributes].map(attr => attr.nodeName) ); 
     /* Output console formatting */ .as-console-wrapper { position: absolute; top: 0; } 
     http://sofit.miximages.com/javascript/… 

    questo aiuta?

    Questa proprietà restituisce tutti gli attributi di un elemento in un array per te. Ecco un esempio.

     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 + ','; } }); 
      

    Per ottenere una proprietà da html

      

    e poi in javascript:

     function myFunction(event) { var CreatedById = $(event.currentTarget).attr('data-createdbyid'); //or var CreatedById2 = $(event.currentTarget).data('createdbyid'); //do something with that... } 

    In bocca al lupo!

    In javascript:

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

    Per accedere ai nomi e ai valori degli attributi:

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