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

Resuelto Francisc asked hace 14 años • 14 respuestas

¿Se ha desarrollado una mejor práctica sobre el uso setAttributeen lugar de la notación de atributo punto ( )?.

P.ej:

myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");

o

myObj.className = "nameOfClass";
myObj.id = "someID";
Francisc avatar Oct 13 '10 04:10 Francisc
Aceptado

De Javascript: la guía definitiva , aclara las cosas. Observa que los objetos HTMLElement de un documento HTML definen propiedades JS que corresponden a todos los atributos HTML estándar.

Por lo tanto, solo necesita usarlo setAttributepara atributos no estándar.

Ejemplo:

node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works
olan avatar Jan 10 '2014 12:01 olan

Ninguna de las respuestas anteriores está 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 manera confiable en los navegadores modernos siempre que sepa cómo utilizarlos.

1.element.attributes

Los elementos tienen atributos de propiedad que devuelven un NamedNodeMap activo de objetos Attr . Los índices de esta colección pueden ser diferentes entre navegadores. Por tanto, el pedido no está garantizado. NamedNodeMaptiene métodos para agregar y eliminar atributos ( getNamedItemy setNamedItem, respectivamente).

Tenga en cuenta que, aunque XML distingue explícitamente entre mayúsculas y minúsculas, la especificación DOM exige que los nombres de cadenas se normalicen , por lo que los nombres pasados getNamedItem​​no distinguen entre mayúsculas y minúsculas.

Uso de ejemplo:

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>
Expandir fragmento

2. element.getAttributeyelement.setAttribute

Estos métodos existen directamente en el Elementsin necesidad de acceder attributesa sus métodos, pero realizan las mismas funciones.

Nuevamente, observe que el nombre de la cadena no distingue entre mayúsculas y minúsculas.

Uso de ejemplo:

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>
Expandir fragmento

3. Propiedades del objeto DOM, comoelement.id

Se puede acceder a muchos atributos utilizando propiedades convenientes en el objeto DOM. Las propiedades que existen en un objeto determinado dependen del tipo de nodo DOM del objeto, independientemente de qué atributos se especifiquen en el HTML. Las propiedades disponibles se definen en algún lugar de la cadena de prototipos del objeto DOM en cuestión. Entonces, las propiedades específicas que se definan dependerán del tipo de Elemento al que esté accediendo.

Por ejemplo, classNamey idestán definidos Elementy existen en todos los nodos DOM que son elementos, pero no nodos de texto o comentarios. valueestá definido de manera más estricta. Solo está disponible en HTMLInputElementy sus descendientes.

Tenga en cuenta 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 verifique las especificaciones para estar seguro.

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

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

Uso de ejemplo:

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>
Expandir fragmento

Advertencia: esta es una explicación de cómo las especificaciones HTML definen los atributos y cómo los manejan los navegadores modernos y permanentes. Ciertamente hay navegadores antiguos (IE, Netscape, etc.) que no cumplieron con las especificaciones o incluso fueron anteriores a ellas. Si necesita admitir navegadores antiguos (rotos), necesitará más información de la que se proporciona aquí.

Ben avatar Apr 12 '2016 18:04 Ben