not - ¿Cuándo usar setAttribute vs.attribute=en JavaScript?
setattribute jquery (7)
¿Se ha desarrollado una mejor práctica al usar setAttribute lugar de la notación de atributo de punto ( . )?
P.ej:
myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");
o
myObj.className = "nameOfClass";
myObj.id = "someID";
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.
Entonces 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 está completa y la mayoría contiene información errónea.
Hay tres formas de acceder a los atributos de un Element DOM en JavaScript. Los tres funcionan de manera confiable en los navegadores modernos siempre que comprenda cómo utilizarlos.
1. element.attributes
Los elementos tienen un attributes propiedad que devuelve un NamedNodeMap vivo de los objetos Attr . Los índices de esta colección pueden ser diferentes entre los navegadores. Entonces, la orden no está garantizada. 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 requiere que los nombres de cadena se normalicen , por lo que los nombres pasados a getNamedItem son, de hecho, 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 y element.setAttribute
Estos métodos existen directamente en el Element sin necesidad de acceder a los attributes y sus métodos, pero realizan las mismas funciones.
De nuevo, 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 del nodo DOM, no de los atributos definidos en el HTML. Las propiedades se definen 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 e id están definidos en Element y existen en todos los nodos DOM que son elementos (es decir, no en los nodos de texto o comentario). Pero el value es más estrecho. Está definido en HTMLInputElement y puede no existir en otros elementos.
Tenga en cuenta que las propiedades de JavaScript son sensibles a las mayúsculas Aunque la mayoría de las propiedades usarán minúsculas, algunas son camelCase. Por lo tanto, siempre verifique las especificaciones para estar seguro.
Esta "tabla" captura una porción 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 define la especificación de HTML y los navegadores modernos manejan los atributos. No intenté lidiar con las limitaciones de navegadores antiguos y rotos. Si necesita admitir exploradores antiguos, además de esta información, deberá saber qué está roto en esos navegadores.
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);
}
Siempre debe usar el formulario directo .attribute (pero vea el enlace de la versión anterior del módulo quirks) si desea acceso programático en JavaScript. Debe manejar los diferentes tipos de atributos (pensar "onload") correctamente.
Use getAttribute / setAttribute cuando desee tratar el DOM tal como está (por ejemplo, texto literal solamente). Los diferentes navegadores confunden a los dos. Consulte los modos de Quirks: atributo (en) compatibilidad .
Un caso que encontré donde setAttribute es necesario es cuando se cambian 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 de eso, 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"
métodos para establecer atributos (por ejemplo, clase) en un elemento: 1. el.className = cadena 2. el.setAttribute (''clase'', cadena) 3. el.attributes.setNamedItem (objeto) 4. el.setAttributeNode (nodo)
Hice una prueba de referencia simple ( here )
y parece que setAttributeNode es aproximadamente 3 veces más rápido que usar setAttribute.
entonces, si el rendimiento es un problema, use "setAttributeNode"
"¿Cuándo usar setAttribute vs .attribute = en JavaScript?"
Una regla general es usar .attribute y verificar si funciona en el navegador.
..Si funciona en el navegador, ya está listo.
.. Si no lo hace, use .setAttribute(attribute, value) lugar de .attribute para ese atributo.
Rinse-repeat para todos los atributos.
Bueno, si eres flojo, simplemente puedes usar .setAttribute . Eso debería funcionar bien en la mayoría de los navegadores. (Aunque los navegadores compatibles con .attribute pueden optimizarlo mejor que .setAttribute(attribute, value) .