When to use setAttribute vs attribute in JavaScript

Question

Has a best-practice around using setAttribute instead of the dot     attribute notation been developed   E g    myObj setAttribute  className    nameOfClass    myObj setAttribute  id    someID      or  myObj className    nameOfClass   myObj id    someID

User · Answer

From Javascript  The Definitive Guide  it clarifies things  It notes that HTMLElement objects of a HTML doc define JS properties that correspond to all standard HTML attributes   So you only need to use setAttribute for non-standard attributes   Example   node className    test      works node frameborder    0      doesn t work - non standard attribute node setAttribute  frameborder    0       works

User · Answer

When to use setAttribute vs  attribute  in JavaScript    A general rule is to use  attribute and check if it works on the browser     If it works on the browser  you re good to go     If it doesn t  use  setAttribute attribute  value  instead of  attribute for that attribute   Rinse-repeat for all attributes   Well  if you re lazy you can simply use  setAttribute  That should work fine on most browsers   Though browsers that support  attribute can optimize it better than  setAttribute attribute  value

User · Answer

These answers aren t really addressing the large confusion with between properties and attributes  Also  depending on the Javascript prototype  sometimes you can use a an element s property to access an attributes and sometimes you can t  First  you have to remember that an HTMLElement is a Javascript object  Like all objects  they have properties  Sure  you can create a property called nearly anything you want inside HTMLElement  but it doesn t have to do anything with the DOM  what s on the page   The dot notation     is for properties   Now  there some special properties that are mapped to attributes  and at the time or writing there are only 4 that are guaranteed  more on that later   All HTMLElements include a property called attributes  HTMLElement attributes is a live NamedNodeMap Object that relates to the elements in the DOM   quot Live quot  means that when the node changes in the DOM  they change on the JavaScript side  and vice versa  DOM attributes  in this case  are the nodes in question  A Node has a  nodeValue property that you can change  NamedNodeMap objects have a function called setNamedItem where you can change the entire node  You can also directly access the node by the key  For example  you can say  attributes  quot dir quot   which is the same as  attributes getNamedItem  dir     Side note  NamedNodeMap is case-insensitive  so you can also pass  DIR    There s a similar function directly in HTMLElement where you can just call setAttribute which will automatically create a node if it doesn t exist and set the nodeValue  There are also some attributes you can access directly as properties in HTMLElement via special properties  such as dir   Here s a rough mapping of what it looks like  HTMLElement     attributes        setNamedItem  function attr  newAttr           this attr    newAttr                 getNamedItem  function attr          return this attr              myAttribute1          nodeName   myAttribute1         nodeValue   myNodeValue1             myAttribute2          nodeName   myAttribute2         nodeValue   myNodeValue2               setAttribute  function attr  value         let item   this attributes getNamedItem attr       if   item          item   document createAttribute attr         this attributes setNamedItem attr  item             item nodeValue   value         getAttribute  function attr         return this attributes attr   amp  amp  this attributes attr  nodeValue         dir     Special map to attributes dir nodeValue         id      Special map to attributes id nodeValue         className     Special map to attributes class nodeValue          lang     Special map to attributes lang nodeValue           So you can change the dir attributes 6 ways       1  Replace the node with setNamedItem   const newAttribute   document createAttribute  dir      newAttribute nodeValue    rtl     element attributes setNamedItem newAttribute         2  Replace the node by property name    const newAttribute2   document createAttribute  dir      newAttribute2 nodeValue    rtl     element attributes  dir     newAttribute2       OR   element attributes dir   newAttribute2        3  Access node with getNamedItem and update nodeValue      Attribute must already exist      element attributes getNamedItem  dir   nodeValue    rtl         4  Access node by property update nodeValue      Attribute must already exist      element attributes  dir   nodeValue    rtl        OR   element attributes dir nodeValue    rtl         5  use setAttribute       element setAttribute  dir    rtl            6  use the UNIQUELY SPECIAL dir property   element  quot dir quot      rtl     element dir    rtl     You can update all properties with methods  1-5  but only dir  id  lang  and className with method  6  Extensions of HTMLElement HTMLElement has those 4 special properties  Some elements are extended classes of HTMLElement have even more mapped properties  For example  HTMLAnchorElement has HTMLAnchorElement href  HTMLAnchorElement rel  and HTMLAnchorElement target  But  beware  if you set those properties on elements that do not have those special properties  like on a HTMLTableElement  then the attributes aren t changed and they are just  normal custom properties  To better understand  here s an example of its inheritance  HTMLAnchorElement extends HTMLElement        inherits all of HTMLElement   href        Special map to attributes href nodeValue         target      Special map to attributes target nodeValue         rel         Special map to attributes ref nodeValue           Custom Properties Now the big warning  Like all Javascript objects  you can add custom properties  But  those won t change anything on the DOM  You can do    const newElement   document createElement  div         THIS WILL NOT CHANGE THE ATTRIBUTE   newElement display    block    But that s the same as   newElement myCustomDisplayAttribute    block    This means that adding a custom property will not be linked to  attributes attr  nodeValue  Performance I ve built a jsperf test case to show the difference  https   jsperf com set-attribute-comparison  Basically  In order   Custom properties because they don t affect the DOM and are not attributes  Special mappings provided by the browser  dir  id  className   If attributes already exists  element attributes ATTRIBUTENAME nodeValue    setAttribute    If attributes already exists  element attributes getNamedItem ATTRIBUTENAME  nodeValue   newValue element attributes ATTRIBUTENAME   newNode  element attributes setNamedItem ATTRIBUTENAME    newNode  Conclusion  TL DR   Use the special property mappings from HTMLElement  element dir  element id   element className  or element lang   If you are 100  sure the element is an extended HTMLElement with a special property  use that special mapping   You can check with if  element instanceof HTMLAnchorElement     If you are 100  sure the attribute already exists  use element attributes ATTRIBUTENAME nodeValue   newValue   If not  use setAttribute

User · Answer

methods for setting attributes for example class  on an element   1  el className   string 2  el setAttribute  class  string  3  el attributes setNamedItem object  4  el setAttributeNode node   I have made a simple benchmark test  here   and it seems that setAttributeNode is about 3 times faster then using setAttribute   so if performance is an issue - use  setAttributeNode

User · Answer

None of the previous answers are complete and most contain misinformation   There are three ways of accessing the attributes of a DOM Element in JavaScript  All three work reliably in modern browsers as long as you understand how to utilize them   1  element attributes  Elements have a property attributes that returns a live NamedNodeMap of Attr objects  The indexes of this collection may be different among browsers  So  the order is not guaranteed  NamedNodeMap has methods for adding and removing attributes  getNamedItem and setNamedItem  respectively    Notice that though XML is explicitly case sensitive  the DOM spec calls for string names to be normalized  so names passed to getNamedItem are effectively case insensitive   Example Usage    x000D   x000D  var div   document getElementsByTagName  div   0   x000D   x000D    you can look up specific attributes x000D  var classAttr   div attributes getNamedItem  CLASS    x000D  document write  attributes getNamedItem   Name      classAttr name     Value      classAttr value     lt br gt     x000D   x000D    you can enumerate all defined attributes x000D  for var i   0  i  lt  div attributes length  i      x000D    var attr   div attributes i   x000D    document write  attributes   Name      attr name     Value      attr value     lt br gt     x000D    x000D   x000D    create custom attribute x000D  var customAttr   document createAttribute  customTest    x000D  customAttr value    567   x000D  div attributes setNamedItem customAttr   x000D   x000D    retreive custom attribute x000D  customAttr   div attributes getNamedItem  customTest    x000D  document write  attributes getNamedItem   Name      customAttr name     Value      customAttr value     lt br gt     x000D   lt div class  class1  id  main  data-test  stuff  nonStandard  1234  gt  lt  div gt  x000D   x000D   x000D    2  element getAttribute  amp  element setAttribute  These methods exist directly on the Element without needing to access attributes and its methods but perform the same functions   Again  notice that string name are case insensitive   Example Usage    x000D   x000D  var div   document getElementsByTagName  div   0   x000D   x000D    get specific attributes x000D  document write  Name  class Value      div getAttribute  class       lt br gt     x000D  document write  Name  ID Value      div getAttribute  ID       lt br gt     x000D  document write  Name  DATA-TEST Value      div getAttribute  DATA-TEST       lt br gt     x000D  document write  Name  nonStandard Value      div getAttribute  nonStandard       lt br gt     x000D   x000D   x000D    create custom attribute x000D  div setAttribute  customTest    567    x000D   x000D    retreive custom attribute x000D  document write  Name  customTest Value      div getAttribute  customTest       lt br gt     x000D   lt div class  class1  id  main  data-test  stuff  nonStandard  1234  gt  lt  div gt  x000D   x000D   x000D    3  Properties on the DOM object  such as element id  Many attributes can be accessed using convenient properties on the DOM object  Which attributes exist depends on the DOM node s type  not which attributes are defined in the HTML  The properties are defined somewhere in the prototype chain of DOM object in question  The specific properties defined will depend on the type of Element you are accessing  For example  className and id are defined on Element and exist on all DOM nodes that are elements  ie  not text or comment nodes   But value is more narrow  It s defined on HTMLInputElement and may not exist on other elements   Notice that JavaScript properties are case sensitive  Although most properties will use lowercase  some are camelCase  So always check the spec to be sure   This  chart  captures a portion of the prototype chain for these DOM objects  It s not even close to complete  but it captures the overall structure                                     Node                                                                                 Element           Text   Comment                                       HTMLElement   SVGElement                        HTMLInputElement   HTMLSpanElement   Example Usage    x000D   x000D  var div   document getElementsByTagName  div   0   x000D   x000D    get specific attributes x000D  document write  Name  class Value      div className     lt br gt     x000D  document write  Name  id Value      div id     lt br gt     x000D  document write  Name  ID Value      div ID     lt br gt       undefined x000D  document write  Name  data-test Value      div dataset test     lt br gt        dataset is a special case x000D  document write  Name  nonStandard Value      div nonStandard     lt br gt       undefined x000D   lt div class  class1  id  main  data-test  stuff  nonStandard  1234  gt  lt  div gt  x000D   x000D   x000D    Caveat  This is an explanation of how the HTML spec defines and modern browsers handle attributes  I did not attempt to deal with limitations of ancient  broken browsers  If you need to support old browsers  in addition to this information  you will need to know what is broken in the those browsers

User · Answer

You should always use the direct  attribute form  but see the quirksmode link below  if you want programmatic access in JavaScript  It should handle the different types of attributes  think  onload   correctly   Use getAttribute setAttribute when you wish to deal with the DOM as it is  e g  literal text only   Different browsers confuse the two  See Quirks modes  attribute  in compatibility

User · Answer

This looks like one case where it is better to use setAttribute   Dev Opera     Efficient JavaScript  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

User · Answer

One case I found where setAttribute is necessary is when changing ARIA attributes  since there are no corresponding properties  For example  x setAttribute  aria-label    Test    x getAttribute  aria-label      There s no x arialabel or anything like that  so you have to use setAttribute   Edit  x  aria-label   does not work  You really do need 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

User · Answer

This is very good discussion  I had one of those moments when I wished or lets say hoped  successfully that I might add  to reinvent the wheel be it a square one  Any ways above is good discussion  so any one coming here looking for what is the difference between Element property and attribute  here is my penny worth and I did have to find it out hard way  I would keep it simple so no extraordinary tech jargon  suppose we have a variable calls  A   what we are used to is as following  Below will throw an error because simply it put its is kind of object that can only have one property and that is singular left hand side   singular right hand side object   Every thing else is ignored and tossed out in bin   x000D   x000D  let A    f   A b  2  console log A b   x000D   x000D   x000D   who has decided that it has to be singular   singular  People who make JavaScript and html standards and thats how engines work  Lets change the example   x000D   x000D  let A       A b  2  console log A b   x000D   x000D   x000D   This time it works       because we have explicitly told it so and who decided we can tell it in this case but not in previous case  Again people who make JavaScript and html standards  I hope we are on this lets complicate it further  x000D   x000D  let A       A attribute      A attribute b 5  console log A attribute b      will work  console log A b      will not work x000D   x000D   x000D   What we have done is tree of sorts level 1 then sub levels of non-singular object  Unless you know what is where and and call it so it will work else no  This is what goes on with HTMLDOM when its parsed and painted a DOm tree is created for each and every HTML ELEMENT  Each has level of properties per say  Some are predefined and some are not  This is where ID and VALUE bits come on  Behind the scene they are mapped on 1 1 between level 1 property and sun level property aka attributes  Thus changing one changes the other  This is were object getter ans setter scheme of things plays role   x000D   x000D  let A     attribute    id     value       getAttributes  function  n        return this attribute n        setAttributes  function  n nn   this attribute n    nn  if this n   this n    nn     id     value          A id   5  console log A id   console log A getAttributes  id      A setAttributes  id  7  console log A id   console log A getAttributes  id      A setAttributes  ids  7  console log A ids   console log A getAttributes  ids      A idsss 7  console log A idsss   console log A getAttributes  idsss     x000D   x000D   x000D   This is the point as shown above ELEMENTS has another set of so called property list attributes and it has its own main properties  there some predefined properties between the two and are mapped as 1 1 e g  ID is common to every one but value is not nor is src  when the parser reaches that point it simply pulls up dictionary as to what to when such and such are present  All elements have properties and attributes and some of the items between them are common  What is common in one is not common in another  In old days of HTML3 and what not we worked with html first then on to JS  Now days its other way around and so has using inline onlclick become such an abomination  Things have moved forward in HTML5 where there are many property lists accessible as collection e g  class  style  In old days color was a property now that is moved to css for handling is no longer valid attribute  Element attributes is sub property list with in Element property  Unless you could change the getter and setter of Element property which is almost high unlikely as it would break hell on all functionality is usually not writable off the bat just because we defined something as A item does not necessarily mean Js engine will also run another line of function to add it into Element attributes item  I hope this gives some headway clarification as to what is what  Just for the sake of this I tried Element prototype setAttribute with custom function it just broke loose whole thing all together  as it overrode native bunch of functions that set attribute function was playing behind the scene

User · Answer

Interesting takeout from Google API script regarding this   They do it like this   var scriptElement   document createElement  script    scriptElement   setAttribute  src    https   some com    scriptElement   setAttribute  nonce    https   some com    scriptElement async    true     Notice  how they use setAttribute for  src  and  nonce   but then  async       for  async  attribute   I m not 100  sure  but probably that s because  async  is only supported on browsers that support direct  attr   assignment  So  there s no sense trying to sestAttribute  async   because if browser doesn t understand  async     - it will not understand  async  attribute   Hopefully  that s a helpful insight from my ongoing  Un-minify GAPI  research project  Correct me if I m wrong

[javascript] When to use setAttribute vs .attribute= in JavaScript?

Examples related to javascript

Examples related to attributes

Examples related to setattribute