Attr y NamedNodeMap

En el HTML DOM, el objeto Attr representa un atributo HTML. Un atributo HTML siempre pertenece a un elemento HTML.

En el HTML DOM, el objeto NamedNodeMap representa una colección desordenada de nodos de atributos de elementos. Se puede acceder a los nodos en un NamedNodeMap por nombre o por índice (número).

1. Propiedades

Propiedades de attr
PropiedadDescripción
attr.isIdDevuelve verdadero si el atributo es de tipo id de lo contrario, devuelve falso. Solo lectura.
attr.nameDevuelve el nombre de un atributo. Solo lectura.
attr.specifiedDevuelve verdadero si se ha especificado el atributo de lo contrario, devuelve falso. Solo lectura.
attr.valueEstablece o devuelve el valor del atributo. Lectura y escritura.

Esta propiedad no es soportada por ningun navegador

var x = document.getElementById("demo").attributes[0].isId;

Esta propiedad es soportada por todos los navegadores

var x = document.getElementsByTagName("BUTTON")[0].attributes[0].name;

Esta propiedad es soportada por todos los navegadores

var x = document.getElementById("demo").attributes[0].specified;

Esta propiedad es soportada por todos los navegadores

var x = document.getElementsByTagName("BUTTON")[0].attributes[0].value;
var obj = document.getElementsByTagName("IMG")[0];
obj.getAttributeNode("src").value = "imagen.gif";

2. Métodos

Métodos de nodemap
MétodoDescripción
nodemap.getNamedItem()Devuelve un nodo de atributo especificado de un NamedNodeMap.
nodemap.item()Devuelve el nodo de atributo en un índice especificado en un NamedNodeMap.
nodemap.length()Devuelve el número de nodos de atributo en un NamedNodeMap.
nodemap.removeNameItem()Elimina un nodo de atributo especificado.
nodemap.setNameItem()Establece el nodo de atributo especificado (por nombre).

Esta propiedad es soportada por todos los navegadores

var btn = document.getElementsByTagName("BUTTON")[0];
btn.attributes.getNamedItem("onclick").value;

Obtener el nombre del primer atributo de un elemento button. Esta propiedad es soportada por todos los navegadores

var obj = document.getElementsByTagName("BUTTON")[0];
var x = obj.attributes.item(0).name;                    //Clave del 1er attribute
var y = obj.attributes.item(1).value;                   //Valor del 2do attribute

Obtenga el número de atributos de un elemento button. Esta propiedad es soportada por todos los navegadores

var x = document.getElementsByTagName("BUTTON")[0].attributes.length;

Elimine el atributo type de un botón de entrada. Esta propiedad es soportada por todos los navegadores

var btn = document.getElementsByTagName("INPUT")[0];
btn.attributes.removeNamedItem("type");

Establecer el atributo class=demo en los elementos H1

var obj = document.getElementsByTagName("H1")[0];
var typ = document.createAttribute("class");
typ.value = "demo";
obj.attributes.setNamedItem(typ);;