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.
Respostas:
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);
}getElementById-var el = document.getElementById($(myObj).attr("id"));
getmétodo ... por exemplo:var obj = $('#example').get(0);
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);Simples:
var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});Attr.nodeValuefoi preterido em favor de value, diz o Google Chrome. Então poderia ser this.name + ':' + this.value. A interface Attr
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();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();jQuery.attr.
jQuery.attro levantador, mas provavelmente seria benéfico usá-lo também.
.slicepara converter a attributespropriedade em MatrizA 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>attrs, você pode acessar o nome do atributo com a namepropriedade no item.
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>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"]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();;(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);;;(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);Formas muito mais concisas de fazer isso:
var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);document.querySelector()retorna o primeiro elemento no documento que corresponde ao seletor especificado.Element.attributesretorna um objeto NamedNodeMap que contém os atributos atribuídos do elemento HTML correspondente.[].map() cria uma nova matriz com os resultados da chamada de uma função fornecida em todos os elementos da matriz de chamada.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>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>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>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"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))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);
}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
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