¿Cuándo usar setAttribute vs. attribute = en JavaScript?

Desde Javascript: La Guía Definitiva, aclara las cosas. Señala que HTMLElement los objetos de un documento HTML definen propiedades JS que corresponden a todos los atributos HTML estándar.

Por lo que solo necesita usar setAttribute para atributos no estándar.

Ejemplo:

node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works

Ninguna de las respuestas anteriores es completa y la mayoría contiene información errónea.

Hay tres formas de acceder a los atributos de un elemento DOM en JavaScript. Los tres funcionan de forma fiable en los navegadores modernos, siempre y cuando entienda cómo utilizarlos.

1. element.attributes

Elementos tienen una propiedad atributos que devuelve un live NamedNodeMap de Attr objetos. Los índices de esta colección pueden ser diferentes entre navegador. Por lo tanto, el pedido no está garantizado. NamedNodeMap tiene métodos para agregar y eliminar atributos (getNamedItem y setNamedItem, respectivamente).

Tenga en cuenta que aunque XML es explícitamente sensible a mayúsculas y minúsculas, la especificación DOM pide que los nombres de cadena se normalicen, por lo que los nombres pasados a getNamedItem son efectivamente insensibles a mayúsculas y minúsculas.

Ejemplo de uso:

var div = document.getElementsByTagName('div')[0];

//you can look up specific attributes
var classAttr = div.attributes.getNamedItem('CLASS');
document.write('attributes.getNamedItem() Name: ' + classAttr.name + ' Value: ' + classAttr.value + '<br>');

//you can enumerate all defined attributes
for(var i = 0; i < div.attributes.length; i++) {
  var attr = div.attributes[i];
  document.write('attributes[] Name: ' + attr.name + ' Value: ' + attr.value + '<br>');
}

//create custom attribute
var customAttr = document.createAttribute('customTest');
customAttr.value = '567';
div.attributes.setNamedItem(customAttr);

//retreive custom attribute
customAttr = div.attributes.getNamedItem('customTest');
document.write('attributes.getNamedItem() Name: ' + customAttr.name + ' Value: ' + customAttr.value + '<br>');

<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

2. element.getAttribute & element.setAttribute

Estos métodos existen directamente en el Element sin necesidad de acceder a attributes y sus métodos pero realizar las mismas funciones.

Una vez más, observe que el nombre de la cadena no distingue entre mayúsculas y minúsculas.

Ejemplo de uso:

var div = document.getElementsByTagName('div')[0];

//get specific attributes
document.write('Name: class Value: ' + div.getAttribute('class') + '<br>');
document.write('Name: ID Value: ' + div.getAttribute('ID') + '<br>');
document.write('Name: DATA-TEST Value: ' + div.getAttribute('DATA-TEST') + '<br>');
document.write('Name: nonStandard Value: ' + div.getAttribute('nonStandard') + '<br>');


//create custom attribute
div.setAttribute('customTest', '567');

//retreive custom attribute
document.write('Name: customTest Value: ' + div.getAttribute('customTest') + '<br>');

<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

3. Propiedades en el objeto DOM, como element.id

Se puede acceder a muchos atributos usando propiedades convenientes en el objeto DOM. Los atributos que existen dependen del tipo de nodo DOM, no de los atributos definidos en el HTML. Las propiedades están definidas en algún lugar de la cadena prototipo del objeto DOM en cuestión. Las propiedades específicas definidas dependerán del tipo de elemento al que esté accediendo. Por ejemplo, className y id se definen en Element y existen en todos los nodos DOM que son elementos (es decir. no nodos de texto o comentario). Pero value es más estrecho. Se define en HTMLInputElement y puede no existir en otros elementos.

Observe que las propiedades de JavaScript distinguen entre mayúsculas y minúsculas. Aunque la mayoría de las propiedades usarán minúsculas, algunas son camelCase. Así que siempre revise la especificación para estar seguro.

Este "gráfico" captura una parte de la cadena de prototipos para estos objetos DOM. Ni siquiera está cerca de completarse, pero captura la estructura general.

                      ____________Node___________
                      |               |         |
                   Element           Text   Comment
                   |     |
           HTMLElement   SVGElement
           |         |
HTMLInputElement   HTMLSpanElement

Ejemplo de uso:

var div = document.getElementsByTagName('div')[0];

//get specific attributes
document.write('Name: class Value: ' + div.className + '<br>');
document.write('Name: id Value: ' + div.id + '<br>');
document.write('Name: ID Value: ' + div.ID + '<br>'); //undefined
document.write('Name: data-test Value: ' + div.dataset.test + '<br>'); //.dataset is a special case
document.write('Name: nonStandard Value: ' + div.nonStandard + '<br>'); //undefined

<div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

Advertencia: Esta es una explicación de cómo la especificación HTML define y los navegadores modernos manejan los atributos. No intenté lidiar con las limitaciones de los navegadores antiguos y rotos. Si usted necesita soporte de navegadores antiguos, además de esta información, tendrá que saber lo que está roto en los navegadores.

Un caso que encontré donde setAttribute es necesario es al cambiar los atributos de ARIA, ya que no hay propiedades correspondientes. Por ejemplo

x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');

No hay x.arialabel ni nada parecido, así que tienes que usar setAttribute.

Editar: x["aria-label"] no funciona. Realmente necesitas setAttribute.

x.getAttribute('aria-label')
null
x["aria-label"] = "Test"
"Test"
x.getAttribute('aria-label')
null
x.setAttribute('aria-label', 'Test2')
undefined
x["aria-label"]
"Test"
x.getAttribute('aria-label')
"Test2"

Este parece un caso en el que es mejor usar setAttribute:

Dev.Opera-JavaScript eficiente

var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
'color: ' + newColor + ';' +
    'border: ' + newBorder + ';';
if(typeof(posElem.style.cssText) != 'undefined') {
    posElem.style.cssText = newStyle;
} else {
    posElem.setAttribute('style', newStyle);
}

"Cuándo usar setAttribute vs .attribute = in JavaScript?"

Una regla general es usar .attribute y comprobar si funciona en el navegador.

..Si funciona en el navegador, ya está listo.

..Si no lo hace, use .setAttribute(attribute, value) en lugar de .attribute para ese atributo.

Enjuague-repetir para todos los atributos.

Bueno, si eres perezoso simplemente puedes usar .setAttribute. Eso debería funcionar bien en la mayoría de los navegadores. (Aunque los navegadores que soportan .attribute pueden optimizarlo mejor que .setAttribute(attribute, value).)

Métodos para establecer atributos (por ejemplo clase) en un elemento: 1. el.className = string 2. el.setAttribute ('class', string) 3. el.atributo.setNamedItem(objeto) 4. el.setAttributeNode (nodo)

He hecho una prueba de referencia simple (aquí)

Y parece que setAttributeNode es aproximadamente 3 veces más rápido que usar setAttribute.

Entonces, si el rendimiento es un problema, use "setAttributeNode"