Quand utiliser setAttribute vs .attribute = en JavaScript?

Vous devez toujours utiliser le formulaire .attribute direct (mais voir le lien quirksmode ci-dessous) si vous voulez un accès programmatique en JavaScript. Il devrait gérer les différents types d'attributs (pensez "onload") correctement.

Utilisez getAttribute / setAttribute lorsque vous souhaitez traiter le DOM tel qu'il est (par exemple, le texte littéral uniquement). Différents navigateurs confondent les deux. Voir les modes Quirks: attribut (in) compatibilité .

De Javascript: le Guide définitif , il clarifie les choses. Il note que les objets HTMLElement d'un document HTML définissent les propriétés JS qui correspondent à tous les attributs HTML standard.

Vous devez donc utiliser setAttribute pour les attributs non standard.

Exemple:

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

Aucune des réponses précédentes n'est terminée et la plupart contiennent des informations erronées.

Il existe trois façons d'accéder aux attributs d'un élément DOM en JavaScript. Tous les trois fonctionnent de manière fiable dans les navigateurs modernes tant que vous comprenez comment les utiliser.

1. element.attributes

Les éléments ont des attributs de propriété qui renvoient un NamedNodeMap en direct des objets Attr . Les index de cette collection peuvent être différents parmi les navigateurs. Donc, la commande n'est pas garantie. NamedNodeMap dispose de méthodes pour ajouter et supprimer des attributs ( getNamedItem et setNamedItem , respectivement).

Notez que la pensée XML est explicitement sensible à la casse, la spécification DOM exige que les noms de chaînes soient normalisés , de sorte que les noms transmis à getNamedItem sont effectivement insensibles aux cas.

Exemple d'utilisation:

 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> 

Un cas où j'ai trouvé où setAttribute est nécessaire est lors de la modification des attributs ARIA, car il n'y a pas de propriétés correspondantes. Par exemple

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

Il n'y a aucun x.arialabel ou quelque chose comme ça, donc vous devez utiliser setAttribute.

Modifier: x ["aria-label"] ne fonctionne pas . Vous avez vraiment besoin de 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" 

Cela ressemble à un cas où il est préférable d'utiliser setAttribute:

Dev.Opera – JavaScript efficace

 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); } 

"Quand utiliser setAttribute vs .attribute = en JavaScript?"

Une règle générale consiste à utiliser .attribute et vérifier si cela fonctionne sur le navigateur.

.. Si cela fonctionne sur le navigateur, vous allez bien.

Si cela ne l'est pas, utilisez .setAttribute(attribute, value) au lieu de .attribute cet attribut.

Rinse-repeat pour tous les attributs.

Eh bien, si vous êtes paresseux, vous pouvez simplement utiliser .setAttribute . Cela devrait fonctionner correctement sur la plupart des navigateurs. (Bien que les navigateurs qui prennent en charge .attribute puissent l'optimiser mieux que .setAttribute(attribute, value) .)

Méthodes pour définir des attributs (par exemple classe) sur un élément: 1. el.className = chaîne 2. el.setAttribute ('classe', chaîne) 3. el.attributes.setNamedItem (objet) 4. el.setAttributeNode (node)

J'ai fait un test de référence simple ( ici )

Et il semble que setAttributeNode soit environ 3 fois plus rapide que l'utilisation de setAttribute.

Donc si la performance est un problème – utilisez "setAttributeNode"