Quiero poner todos los atributos en un elemento Html en una matriz: como si tuviera un objeto jQuery, que html se ve así:
<span name="test" message="test2"></span>ahora una forma es usar el analizador xml descrito aquí , pero luego necesito saber cómo obtener el código html de mi objeto.
la otra forma es hacerlo con jquery, pero ¿cómo? El número de atributos y los nombres son genéricos.
Gracias
Por cierto: no puedo acceder al elemento con document.getelementbyid o algo similar.
Respuestas:
Si solo desea los atributos DOM, probablemente sea más simple usar la attributeslista de nodos en el elemento en sí:
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 la matriz solo con nombres de atributos. Si necesita el valor del atributo, puede usar la nodeValuepropiedad:
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 ejemplo:var obj = $('#example').get(0);
Puede usar este complemento simple 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);
Sencillo:
var element = $("span[name='test']");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});
Attr.nodeValueestá en desuso a favor de value, dice Google Chrome. Entonces esto podría ser this.name + ':' + this.value. La interfaz Attr
Debido a que en IE7 elem.attributes enumera todos los atributos posibles, no solo los actuales, tenemos que probar el valor del atributo. Este complemento 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();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);
Utilizar:
// Setter
$('#element').attrs({
'name' : 'newName',
'id' : 'newId',
'readonly': true
});
// Getter
var attrs = $('#element').attrs();
jQuery.attr.
jQuery.attren el setter, pero probablemente sería beneficioso usarlo también en el getter.
.slicepara convertir la attributespropiedad a ArrayLa attributespropiedad de los nodos DOM es a NamedNodeMap, que es un objeto tipo Array.
Un objeto tipo Array es un objeto que tiene una lengthpropiedad y cuyos nombres de propiedad se enumeran, pero de lo contrario tiene sus propios métodos y no hereda deArray.prototype
El slicemétodo se puede utilizar para convertir objetos de tipo Array en un nuevo 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, puede acceder al nombre del atributo con la namepropiedad del elemento.
Este enfoque funciona bien si necesita obtener todos los atributos con nombre y valor en los objetos devueltos en una matriz.
Salida de ejemplo:
[
{
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>Si solo desea una matriz de nombres de atributos para ese elemento, puede simplemente asignar los resultados:
var onlyAttrNames = allAttrs.map(attr => attr.name);
console.log(onlyAttrNames); // ["name", "message"]La respuesta de Roland Bouman es la mejor y más simple manera de Vanilla. Noté algunos intentos de enchufes jQ, pero simplemente no me parecieron lo suficientemente "llenos", así que hice el mío. El único inconveniente hasta ahora ha sido la incapacidad de acceder a los atributos agregados dinámicamente sin llamar directamente elm.attr('dynamicAttr'). Sin embargo, esto devolverá todos los atributos naturales de un objeto de elemento jQuery.
El complemento utiliza llamadas de estilo jQuery simples:
$(elm).getAttrs();
// OR
$.getAttrs(elm);También puede agregar un segundo parámetro de cadena para obtener solo un atributo específico. Esto no es realmente necesario para la selección de un elemento, ya que jQuery ya proporciona $(elm).attr('name'), sin embargo, mi versión de un complemento permite múltiples retornos. Entonces, por ejemplo, una llamada como
$.getAttrs('*', 'class');Resultará en una matriz de []retorno de objetos {}. Cada objeto se verá así:
{ 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);Maneras mucho más concisas de hacerlo:
var element = document.querySelector(/* … */);
[].slice.call(element.attributes).map(function (attr) { return attr.nodeName; });[...document.querySelector(/* … */).attributes].map(attr => attr.nodeName);document.querySelector()devuelve el primer elemento dentro del documento que coincide con el selector especificado.Element.attributesdevuelve un objeto NamedNodeMap que contiene los atributos asignados del elemento HTML correspondiente.[].map() crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de la matriz que realiza la llamada.¿Esto ayuda?
Esta propiedad devuelve todos los atributos de un elemento en una matriz para usted. Aquí hay un ejemplo.
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 obtener los atributos de muchos elementos y organizarlos, sugiero hacer una matriz de todos los elementos que desea recorrer y luego crear una matriz secundaria para todos los atributos de cada elemento en bucle.
Este es un ejemplo de un script que recorrerá los elementos recopilados e imprimirá dos atributos. Este script supone que siempre habrá dos atributos, pero puede solucionarlo fácilmente con una asignación 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>¡A cada respuesta aquí le falta la solución más simple usando el método del elemento getAttributeNames !
Recupera los nombres de todos los atributos actuales del elemento como una matriz regular, que luego puede reducir a un buen objeto de claves / 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>Imagina que tienes un elemento HTML como el siguiente:
<a class="toc-item"
href="/books/n/ukhta2333/s5/"
id="book-link-29"
>
Chapter 5. Conclusions and recommendations
</a>Una forma de obtener todos los atributos es convertirlos en una 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)Y a continuación se muestra la cadena que obtendrá (del ejemplo), que incluye todos los atributos:
class="toc-item" href="/books/n/ukhta2333/s5/" id="book-link-29"Intenta algo como esto
<div id=foo [href]="url" class (click)="alert('hello')" data-hello=world></div>y luego obtener todos los 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 una variedad de atributos usar
// ["id","[href]","class","(click)","data-hello"]
Object.keys(getAttributes(foo))Muy simple. Solo necesita recorrer el elemento de atributos e insertar sus valores de nodo en una matriz:
let att = document.getElementById('id');
let arr = Array();
for (let i = 0; i < att.attributes.length; i++) {
arr.push(att.attributes[i].nodeValue);
}Si desea el nombre del atributo, puede reemplazar '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 la conversión de objetos
* Requiere: 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
}Esto convertirá todos los atributos html en un objeto anidado
HTML de ejemplo: <div custom-nested-path1="value1" custom-nested-path2="value2"></div>
Resultado: {custom:{nested:{path1:"value1",path2:"value2"}}}
Si parseJson se establece en verdaderos valores json se convertirán en objetos
En 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 acceder a los nombres y valores de los atributos:
attributes[0].nodeName
attributes[0].nodeValue