DOM
Manipulando atributos
Buscar..
Observaciones
Los atributos son un tipo específico de objeto en la API DOM. En versiones anteriores de la API DOM, se heredaban del tipo de Node , pero esto se cambió en la versión 4.
En los ejemplos que se refieren al dataset de dataset , los "navegadores modernos" excluyen específicamente las versiones de Internet Explorer de menos de 11. Visite caniuse.com para obtener información más actualizada.
Obteniendo un atributo
Algunos atributos son directamente accesibles como propiedades del elemento (por ejemplo, alt , href , id , title y value ).
var a = document.querySelector("a"),
url = a.href;
Se puede acceder a otros atributos, incluidos los atributos de datos, de la siguiente manera:
var a = document.querySelector("a"),
tooltip = a.getAttribute("aria-label");
A los atributos de los datos también se puede acceder usando un dataset (navegadores modernos)
// <a href="#" data-tracking-number="ABC-123">Widget</a>
var a = document.querySelector("a"),
tracker = a.dataset.trackingNumber;
Estableciendo un atributo
Algunos atributos son directamente accesibles como propiedades del elemento (por ejemplo, alt, href, id, title y value).
document.querySelector("a").href = "#top";
Otros atributos, incluidos los atributos de datos, se pueden configurar de la siguiente manera:
document.querySelector("a").setAttribute("aria-label", "I like turtles");
Los atributos de los datos también se pueden configurar utilizando un conjunto de datos (navegadores modernos)
var a = document.querySelector("a");
a.dataset.test = "123";
a.dataset['test-2'] = "456";
resultados en
<a href="#" data-test="123" data-test-2="456">Widget</a>
Eliminando un atributo
Para eliminar un atributo, incluyendo propiedades directamente accesibles
document.querySelector("a").removeAttribute("title");
Los atributos de los datos también se pueden eliminar de la siguiente manera (navegadores modernos):
// remove "data-foo" attribute
delete document.querySelector("a").dataset.foo;