Node.attributes

  • Revision slug: DOM/Node.attributes
  • Revision title: Node.attributes
  • Revision id: 346407
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

Summary

.attributes is a collection of all attribute nodes registered to the specified node. It is a NamedNodeMap,not an Array, so it has no Array methods and the Attr nodes' indexes may differ among browsers.
.attributes is dynamically updated by the browser with all inline and JavaScript created attribute nodes.

{{ DomRef() }}

Syntax

x=element.attributeName                    //if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id)
                                           //   x gets assigned the value of that Attribute Node
                                           //if attributeName isn't a W3C defined attribute or an attribute node for the element,
                                           //   x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value   // }if attributeName is an Attribute Node for the element, x gets assigned that node's value
  element.attributes['attributeName'].value// }if attributeName isn't an Attribute Node, produce EXCEPTION
  element.attributes[indexNumber].value    // }(same for indexing by indexNumber)

x= element.getAttribute('attributeName')   // if attributeName is an Attribute Node for the element, x gets assigned its value
                                           // if AttributeName isn't an Attribute Node for the element, x gets assigned the null value


element.attributeName= x                   //if attributeName is a W3C defined attribute and an attribute node for the element, (eg id)
                                           //   that Attribute Node gets assigned the value of x
                                           //if attributeName isn't a W3C defined attribute or an attribute node for the element, 
                                           //   the element's (JavaScript object) attributeName property is assigned the value of x

element.attributes.attributeName.value   =x// }if attributeName is an Attribute Node for the element, it's assigned the value as x
element.attributes['attributeName'].value  // }if attributeName isn't an Attribute Node, produce EXCEPTION
element.attributes[indexNumber].value      // }(same for indexing by indexNumber)

element.setAttribute('attributeName', x)   // Creates an attribute Node named attributeName for the element (if one doesn't exist),
                                                  and assigns it value as x

attributeMap= element.attributes           // Assigns to attributeMap a NameNodeMap collection of Attr nodes that are copies of the
                                           // ones in the element's .attributes collection. Length is 0 if the element has no
                                           // Attribute Nodes. The element.attributes syntax is read only
style is mirrored in the .attributes collection.
Changes to style, whatever the method, update the .attributes collection, the element's attribute nodes and the CSSStyleDeclaration object in Firefox.
Consider quirksmode for compatibility issues in other browsers, or open the following example in your browser.

Example

<html>
<body style="white-space:nowrap">
<p id="0" onclick="checkAttributes(event)"      style="color: 000; text-indent: 10px" attrib0="value0">Click on this paragraph to show its .attributes collection and ways you can read/ modify it</p>
<p id="1" onclick="alert('Paragraph1 onclick')" style="color: 000; text-indent: 10px"                 >This paragraph is similar to the one above</p>
<p id="2" onclick="alert('Paragraph2 onclick')" style="color: 000; text-indent: 10px"                 >As is this paragraph</p>
<div id="container" style="font-family: Courier New; font-size: 13px"></div>

<script>
/* This html file can be opened in all modern browsers, to help 
   highlight implementation differences regarding .attributes   */

function w(text){document.getElementById("container").innerHTML+=text}

function checkAttributes(event){
var t=[]; var ta=[]
for (var i=0;i<3;i++){t[i]=document.getElementById(i);ta[i]=t[i].attributes}
var br="<br/>"
var sp="&nbsp"
for (var i=0;i<39;i++){sp+="&nbsp"}
var te=["Directly &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp: ", "Via .attributes : ", "Via getAttribute: ", "Directly, color : ", "Directly, all &nbsp&nbsp: ", "This returns a ",  " ... gives the following results upon reading it: ", " (This syntax has signaled an error)", " (p#0's .attributes collection now contains ", " attribute nodes)", "<b><I>(IE does not change the event handler through this syntax)</I></b>", " <b><I>(Safari and Chrome don't update .attributes through this syntax)</I></b>", "<b><i> (This syntax returns a function in IE, the function's string everywhere else)</i></b>", "<b><i> (This syntax returns null in IE, the function's string everywhere else)</i></b>", "<b><i> (this syntax returns the attributes' value in IE, undefined everywhere else)</i></b>", "<b><i> (This syntax creates an attribute node for the element in IE, but in no other browser)</i></b>", "<b><i> (This syntax returns the attribute's value in IE, but in no other browser)</i></b>"]


w(".attributes is an "+ ta[0]+ ", a dynamically updated collection of the element's Attr nodes."+br)
w("Initially the paragraph you clicked on had 4 inline attributes (id, onclick, style, attrib0), and the"+br)
w(".attributes collection consisted of "+ta[0].length+" nodes. These numbers are equal in FF, Safari, Chrome and Opera."+br)
w("IE, on the other hand, populates .attributes with all possible attributes for the element."+br+br)


w("<h4>"+"How to READ inline attributes, event handlers and style within .attributes"+"</h4>") 
w("p#0.id      ... "+br+te[0]+ t[0].id +br+te[1]+ ta[0].id.value +br+te[2]+ t[0].getAttribute('id') +br+br)
w("p#0.onclick ... "+br+te[0]+te[5]+ typeof t[0].onclick+ " : " + t[0].onclick +br+te[1]+te[5]+ typeof ta[0].onclick.value +" : "+ ta[0].onclick.value +br+te[2]+te[5]+ typeof t[0].getAttribute('onclick') +" : "+ t[0].getAttribute('onclick') +te[12]+br+br)
w("p#0.style   ... "+br+te[3]+ t[0].style.color +br+te[4]+ t[0].style.cssText +br+te[1]+ ta[0].style.value +br+te[2]+ t[0].getAttribute('style') +br+br)
w("p#0.attrib0 ... "+br+te[0]+ t[0].attrib0 +te[14]+br+te[1]);try{t[0].attrib0.value}catch(err){w(te[7])};w(br+te[2]+ t[0].getAttribute('attrib0') +br+br)

w("<h4>"+"How to CHANGE INLINE ATTRIBUTES within .attributes and READ JAVASCRIPT-DEFINED ATTRIBUTES"+"</h4>")
                   t[0].id="ChangedId0"
w(                " p#0.id='ChangedId0'" +br+te[0]+ t[0].id +br+te[1]+ ta[0].id.value +br+te[2]+ t[0].getAttribute('id') +br+br)
            ta[1].id.value='ChangedId1'
w("p#1.attributes.id.value='ChangedId1'" +br+te[0]+ t[1].id +br+te[1]+ ta[1].id.value +br+te[2]+ t[1].getAttribute('id') +br+br)
   t[2].setAttribute('id', 'ChangedId2')
w( "p#2.setAttribute('id', 'ChangedId2')"+br+te[0]+ t[2].id +br+te[1]+ ta[2].id.value +br+te[2]+ t[2].getAttribute('id') +br+br)


w("<h4>"+"How to CHANGE INLINE EVENT HANDLERS within .attributes and READ JAVASCRIPT-DEFINED EVENT HANDLERS"+"</h4>")
          t[0].onclick=function(){alert(null)}
w(        "p#0.onclick=function(){alert(null)}"           +br+te[0]+te[5]+ typeof t[0].onclick +" : "+ t[0].onclick +br+te[1]+te[5]+ typeof ta[0].onclick.value +" : "+ ta[0].onclick.value +te[13]+br+te[2]+te[5]+ typeof t[0].getAttribute('onclick') +" : "+ t[0].getAttribute('onclick') +te[12]+br+br)
            ta[1].onclick.value='alert(false)'
w("p#1.attributes.onclick.value='alert(false)'" +br+te[10]+br+te[0]+te[5]+ typeof t[1].onclick +" : "+ t[1].onclick +br+te[1]+te[5]+ typeof ta[1].onclick.value +" : "+ ta[1].onclick.value +br+te[2]+te[5]       + typeof t[1].getAttribute('onclick') +" : "+ t[1].getAttribute('onclick') +br+br)
    t[2].setAttribute('onclick', 'alert(true)')
w(  "p#2.setAttribute('onclick', 'alert(true)')"+br+te[10]+br+te[0]+te[5]+ typeof t[2].onclick +" : "+ t[2].onclick +br+te[1]+te[5]+ typeof ta[2].onclick.value +" : "+ ta[2].onclick.value +br+te[2]+te[5]       + typeof t[2].getAttribute('onclick') +" : "+ t[2].getAttribute('onclick') +br+br)


w("<h4>"+"How to CHANGE INLINE STYLE within .attributes and READ JAVASCRIPT-DEFINED STYLE"+"</h4>")
           t[0].style.cssText='color: CCC; text-indent: 0px'
w(         "p#0.style.cssText='color: CCC; text-indent: 0px'" +br+te[11]+br+te[3]+ t[0].style.color +br+te[4]+ t[0].style.cssText +br+te[1]+ ta[0].style.value +br+te[2]+ t[0].getAttribute('style') +br+br)
        try{ta[1].style.value='color: CCC; text-indent: 1px'
w("p#1.attributes.style.value='color: CCC; text-indent: 1px'"           +br+te[3]+ t[1].style.color +br+te[4]+ t[1].style.cssText +br+te[1]+ ta[1].style.value +br+te[2]+ t[1].getAttribute('style') +br+br)}catch(er){w(te[7]+br+br+br+br+br+br)}
   t[2].setAttribute('style', 'color: CCC; text-indent: 2px')
w( "p#2.setAttribute('style', 'color: CCC; text-indent: 2px')"          +br+te[3]+ t[2].style.color +br+te[4]+ t[2].style.cssText +br+te[1]+ ta[2].style.value +br+te[2]+ t[2].getAttribute('style') +br+br)


w("<h4>"+"How to READ AN UNDEFINED ATTRIBUTE within .attributes"+"</h4>")
w(te[0]+ t[0].newattribute +br+te[1]); try{ta[0].newattribute.value}catch(er){w(te[7])};w(br+te[2]+ t[0].getAttribute('newattribute') +br+br)

w("<h4>"+"How to ADD AN ATTRIBUTE VIA JAVASCRIPT to .attributes"+"</h4>")
w(te[8]+ ta[0].length +te[9]+br)
                                 t[0].setAttribute('attrib1', 'value1')
w(                               "p#0.setAttribute('attrib1', 'value1')"                                                    +br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib1 +te[14]+br+te[1]+ ta[0].attrib1.value +br+te[2]+                        t[0].getAttribute('attrib1') +br+br)
                     temp=document.createAttribute('attrib2');temp.nodeValue='value2';t[0].setAttributeNode(temp)
w(                  "temp=document.createAttribute('attrib2');"+br+"temp.nodeValue='value2'"+br+"p#0.setAttributeNode(temp)"+br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib2 +te[14]+br+te[1]+ ta[0].attrib2.value +br+te[2]+                        t[0].getAttribute('attrib2') +br+br)
        try{ta[0].attrib3=document.createAttribute('attrib3');ta[0].attrib3.value='value3'
w("p#0.attributes.attrib3=document.createAttribute('attrib3');"+br+"p#0.attributes.attrib3.value='value3'"                  +br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib3 +br+te[1]+        ta[0].attrib3.value +br+te[2]+                        t[0].getAttribute('attrib3') +br+br)}catch(er){w(te[7]+br+br+br+br+br+br)}
                                               t[0].attrib4='value4'
w(                                             "p#0.attrib4='value4'"                                             +br+te[15]+br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib4 +br+te[1]); try{w(ta[0].attrib4.value)}catch(er){w(te[7])};w(te[16]+br+te[2]+ t[0].getAttribute('attrib4') +te[16]+br+br)
}
</script>
</body>
</html>

Notes

Numerical indexing is useful for going through all of an element's attributes.
The following example runs through the attribute nodes for the element in the document with id "p1", and prints each attribute's value.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>
  <title>Attributes example</title>
  <script type="text/javascript">
   function showFirstAttr() 
   {
    var firstPara = document.getElementById("p1");
    var outputText = document.getElementById("result");

    // First, let's verify that the paragraph has some attributes    
    if (firstPara.hasAttributes()) 
    {
      var attrs = firstPara.attributes;
      var text = ""; 
      for(var i=attrs.length-1; i>=0; i--) {
        text += attrs[i].name + "->" + attrs[i].value;
      }
      outputText.value = text;
    } else {
      outputText.value = "No attributes to show"
    };
   }
  </script>
 </head>

<body>
 <p id="p1" style="color: green;">Sample Paragraph</p>
 <form action="">
  <p><input type="button" value="Show first attribute name and value"
      onclick="showFirstAttr();">
  <input id="result" type="text" value=""></p>
 </form>
</body>
</html>

External links

Cross-browser compatibility considerations: on quirksmode

{{ languages( { "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "pl": "pl/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}

Revision Source

<h3 id="Summary">Summary</h3>
<p><code>.attributes</code> is a collection of all attribute nodes registered to the specified node. It is a <code>NamedNodeMap,</code>not an <code>Array</code>, so it has no <code>Array</code> methods and the <code>Attr</code> nodes' indexes may differ among browsers.<br />
  <code>.attributes</code> is dynamically updated by the browser with all inline and JavaScript created attribute nodes.</p>
<p>{{ DomRef() }}</p>
<h3 id="Syntax" name="Syntax">Syntax</h3>
<pre class="eval">
x=<em>element</em>.attributeName                    //if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg <em>id</em>)
                                           //   x gets assigned the value of that Attribute Node
                                           //if attributeName isn't a W3C defined attribute or an attribute node for the element,
                                           //   x gets assigned the value of the attributeName property for <em>element</em> (JavaScript object)

x=<em>element</em>.attributes.attributeName.value   // }if attributeName is an Attribute Node for the element, x gets assigned that node's value
  element.attributes['attributeName'].value// }if attributeName isn't an Attribute Node, produce EXCEPTION
  element.attributes[indexNumber].value    // }(same for indexing by indexNumber)

x= <em>element</em>.getAttribute('attributeName')   // if attributeName is an Attribute Node for the element, x gets assigned its value
                                           // if AttributeName isn't an Attribute Node for the element, x gets assigned the null value


<em>element</em>.attributeName= x                   //if attributeName is a W3C defined attribute and an attribute node for the element, (eg <em>id</em>)
                                           //   that Attribute Node gets assigned the value of x
                                           //if attributeName isn't a W3C defined attribute or an attribute node for the element, 
                                           //   the element's (JavaScript object) attributeName property is assigned the value of x

element.attributes.attributeName.value   =x// }if attributeName is an Attribute Node for the element, it's assigned the value as x
<em>element</em>.attributes['attributeName'].value  // }if attributeName isn't an Attribute Node, produce EXCEPTION
element.attributes[indexNumber].value      // }(same for indexing by indexNumber)

<em>element</em>.setAttribute('attributeName', x)   // Creates an attribute Node named attributeName for the element (if one doesn't exist),
                                                  and assigns it value as x

attributeMap= <em>element</em>.attributes           // Assigns to attributeMap a NameNodeMap collection of Attr nodes that are copies of the
                                           // ones in the element's .attributes collection. Length is 0 if the element has no
                                           // Attribute Nodes. The element.attributes syntax is read only
</pre>
<div class="note">
  style is mirrored in the .attributes collection.<br />
  Changes to style, whatever the method, update the .attributes collection, the element's attribute nodes and the CSSStyleDeclaration object in Firefox.<br />
  Consider quirksmode for compatibility issues in other browsers, or open the following example in your browser.</div>
<h3 id="Example" name="Example">Example</h3>
<pre class="eval">
&lt;html&gt;
&lt;body style="white-space:nowrap"&gt;
&lt;p id="0" onclick="checkAttributes(event)"      style="color: 000; text-indent: 10px" attrib0="value0"&gt;Click on this paragraph to show its .attributes collection and ways you can read/ modify it&lt;/p&gt;
&lt;p id="1" onclick="alert('Paragraph1 onclick')" style="color: 000; text-indent: 10px"                 &gt;This paragraph is similar to the one above&lt;/p&gt;
&lt;p id="2" onclick="alert('Paragraph2 onclick')" style="color: 000; text-indent: 10px"                 &gt;As is this paragraph&lt;/p&gt;
&lt;div id="container" style="font-family: Courier New; font-size: 13px"&gt;&lt;/div&gt;

&lt;script&gt;
/* This html file can be opened in all modern browsers, to help 
   highlight implementation differences regarding .attributes   */

function w(text){document.getElementById("container").innerHTML+=text}

function checkAttributes(event){
var t=[]; var ta=[]
for (var i=0;i&lt;3;i++){t[i]=document.getElementById(i);ta[i]=t[i].attributes}
var br="&lt;br/&gt;"
var sp="&amp;nbsp"
for (var i=0;i&lt;39;i++){sp+="&amp;nbsp"}
var te=["Directly &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp: ", "Via .attributes : ", "Via getAttribute: ", "Directly, color : ", "Directly, all &amp;nbsp&amp;nbsp: ", "This returns a ",  " ... gives the following results upon reading it: ", " (This syntax has signaled an error)", " (p#0's .attributes collection now contains ", " attribute nodes)", "&lt;b&gt;&lt;I&gt;(IE does not change the event handler through this syntax)&lt;/I&gt;&lt;/b&gt;", " &lt;b&gt;&lt;I&gt;(Safari and Chrome don't update .attributes through this syntax)&lt;/I&gt;&lt;/b&gt;", "&lt;b&gt;&lt;i&gt; (This syntax returns a function in IE, the function's string everywhere else)&lt;/i&gt;&lt;/b&gt;", "&lt;b&gt;&lt;i&gt; (This syntax returns null in IE, the function's string everywhere else)&lt;/i&gt;&lt;/b&gt;", "&lt;b&gt;&lt;i&gt; (this syntax returns the attributes' value in IE, undefined everywhere else)&lt;/i&gt;&lt;/b&gt;", "&lt;b&gt;&lt;i&gt; (This syntax creates an attribute node for the element in IE, but in no other browser)&lt;/i&gt;&lt;/b&gt;", "&lt;b&gt;&lt;i&gt; (This syntax returns the attribute's value in IE, but in no other browser)&lt;/i&gt;&lt;/b&gt;"]


w(".attributes is an "+ ta[0]+ ", a dynamically updated collection of the element's Attr nodes."+br)
w("Initially the paragraph you clicked on had 4 inline attributes (id, onclick, style, attrib0), and the"+br)
w(".attributes collection consisted of "+ta[0].length+" nodes. These numbers are equal in FF, Safari, Chrome and Opera."+br)
w("IE, on the other hand, populates .attributes with all possible attributes for the element."+br+br)


w("&lt;h4&gt;"+"How to READ inline attributes, event handlers and style within .attributes"+"&lt;/h4&gt;") 
w("p#0.id      ... "+br+te[0]+ t[0].id +br+te[1]+ ta[0].id.value +br+te[2]+ t[0].getAttribute('id') +br+br)
w("p#0.onclick ... "+br+te[0]+te[5]+ typeof t[0].onclick+ " : " + t[0].onclick +br+te[1]+te[5]+ typeof ta[0].onclick.value +" : "+ ta[0].onclick.value +br+te[2]+te[5]+ typeof t[0].getAttribute('onclick') +" : "+ t[0].getAttribute('onclick') +te[12]+br+br)
w("p#0.style   ... "+br+te[3]+ t[0].style.color +br+te[4]+ t[0].style.cssText +br+te[1]+ ta[0].style.value +br+te[2]+ t[0].getAttribute('style') +br+br)
w("p#0.attrib0 ... "+br+te[0]+ t[0].attrib0 +te[14]+br+te[1]);try{t[0].attrib0.value}catch(err){w(te[7])};w(br+te[2]+ t[0].getAttribute('attrib0') +br+br)

w("&lt;h4&gt;"+"How to CHANGE INLINE ATTRIBUTES within .attributes and READ JAVASCRIPT-DEFINED ATTRIBUTES"+"&lt;/h4&gt;")
                   t[0].id="ChangedId0"
w(                " p#0.id='ChangedId0'" +br+te[0]+ t[0].id +br+te[1]+ ta[0].id.value +br+te[2]+ t[0].getAttribute('id') +br+br)
            ta[1].id.value='ChangedId1'
w("p#1.attributes.id.value='ChangedId1'" +br+te[0]+ t[1].id +br+te[1]+ ta[1].id.value +br+te[2]+ t[1].getAttribute('id') +br+br)
   t[2].setAttribute('id', 'ChangedId2')
w( "p#2.setAttribute('id', 'ChangedId2')"+br+te[0]+ t[2].id +br+te[1]+ ta[2].id.value +br+te[2]+ t[2].getAttribute('id') +br+br)


w("&lt;h4&gt;"+"How to CHANGE INLINE EVENT HANDLERS within .attributes and READ JAVASCRIPT-DEFINED EVENT HANDLERS"+"&lt;/h4&gt;")
          t[0].onclick=function(){alert(null)}
w(        "p#0.onclick=function(){alert(null)}"           +br+te[0]+te[5]+ typeof t[0].onclick +" : "+ t[0].onclick +br+te[1]+te[5]+ typeof ta[0].onclick.value +" : "+ ta[0].onclick.value +te[13]+br+te[2]+te[5]+ typeof t[0].getAttribute('onclick') +" : "+ t[0].getAttribute('onclick') +te[12]+br+br)
            ta[1].onclick.value='alert(false)'
w("p#1.attributes.onclick.value='alert(false)'" +br+te[10]+br+te[0]+te[5]+ typeof t[1].onclick +" : "+ t[1].onclick +br+te[1]+te[5]+ typeof ta[1].onclick.value +" : "+ ta[1].onclick.value +br+te[2]+te[5]       + typeof t[1].getAttribute('onclick') +" : "+ t[1].getAttribute('onclick') +br+br)
    t[2].setAttribute('onclick', 'alert(true)')
w(  "p#2.setAttribute('onclick', 'alert(true)')"+br+te[10]+br+te[0]+te[5]+ typeof t[2].onclick +" : "+ t[2].onclick +br+te[1]+te[5]+ typeof ta[2].onclick.value +" : "+ ta[2].onclick.value +br+te[2]+te[5]       + typeof t[2].getAttribute('onclick') +" : "+ t[2].getAttribute('onclick') +br+br)


w("&lt;h4&gt;"+"How to CHANGE INLINE STYLE within .attributes and READ JAVASCRIPT-DEFINED STYLE"+"&lt;/h4&gt;")
           t[0].style.cssText='color: CCC; text-indent: 0px'
w(         "p#0.style.cssText='color: CCC; text-indent: 0px'" +br+te[11]+br+te[3]+ t[0].style.color +br+te[4]+ t[0].style.cssText +br+te[1]+ ta[0].style.value +br+te[2]+ t[0].getAttribute('style') +br+br)
        try{ta[1].style.value='color: CCC; text-indent: 1px'
w("p#1.attributes.style.value='color: CCC; text-indent: 1px'"           +br+te[3]+ t[1].style.color +br+te[4]+ t[1].style.cssText +br+te[1]+ ta[1].style.value +br+te[2]+ t[1].getAttribute('style') +br+br)}catch(er){w(te[7]+br+br+br+br+br+br)}
   t[2].setAttribute('style', 'color: CCC; text-indent: 2px')
w( "p#2.setAttribute('style', 'color: CCC; text-indent: 2px')"          +br+te[3]+ t[2].style.color +br+te[4]+ t[2].style.cssText +br+te[1]+ ta[2].style.value +br+te[2]+ t[2].getAttribute('style') +br+br)


w("&lt;h4&gt;"+"How to READ AN UNDEFINED ATTRIBUTE within .attributes"+"&lt;/h4&gt;")
w(te[0]+ t[0].newattribute +br+te[1]); try{ta[0].newattribute.value}catch(er){w(te[7])};w(br+te[2]+ t[0].getAttribute('newattribute') +br+br)

w("&lt;h4&gt;"+"How to ADD AN ATTRIBUTE VIA JAVASCRIPT to .attributes"+"&lt;/h4&gt;")
w(te[8]+ ta[0].length +te[9]+br)
                                 t[0].setAttribute('attrib1', 'value1')
w(                               "p#0.setAttribute('attrib1', 'value1')"                                                    +br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib1 +te[14]+br+te[1]+ ta[0].attrib1.value +br+te[2]+                        t[0].getAttribute('attrib1') +br+br)
                     temp=document.createAttribute('attrib2');temp.nodeValue='value2';t[0].setAttributeNode(temp)
w(                  "temp=document.createAttribute('attrib2');"+br+"temp.nodeValue='value2'"+br+"p#0.setAttributeNode(temp)"+br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib2 +te[14]+br+te[1]+ ta[0].attrib2.value +br+te[2]+                        t[0].getAttribute('attrib2') +br+br)
        try{ta[0].attrib3=document.createAttribute('attrib3');ta[0].attrib3.value='value3'
w("p#0.attributes.attrib3=document.createAttribute('attrib3');"+br+"p#0.attributes.attrib3.value='value3'"                  +br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib3 +br+te[1]+        ta[0].attrib3.value +br+te[2]+                        t[0].getAttribute('attrib3') +br+br)}catch(er){w(te[7]+br+br+br+br+br+br)}
                                               t[0].attrib4='value4'
w(                                             "p#0.attrib4='value4'"                                             +br+te[15]+br+te[8]+ ta[0].length +te[9]+br+te[0]+ t[0].attrib4 +br+te[1]); try{w(ta[0].attrib4.value)}catch(er){w(te[7])};w(te[16]+br+te[2]+ t[0].getAttribute('attrib4') +te[16]+br+br)
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>Numerical indexing is useful for going through all of an element's attributes.<br />
  The following example runs through the attribute nodes for the element in the document with id "p1", and prints each attribute's value.</p>
<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

&lt;html&gt;

 &lt;head&gt;
  &lt;title&gt;Attributes example&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
   function showFirstAttr() 
   {
    var firstPara = document.getElementById("p1");
    var outputText = document.getElementById("result");

    // First, let's verify that the paragraph has some attributes    
    if (firstPara.hasAttributes()) 
    {
      var attrs = firstPara.attributes;
      var text = ""; 
      for(var i=attrs.length-1; i&gt;=0; i--) {
        text += attrs[i].name + "-&gt;" + attrs[i].value;
      }
      outputText.value = text;
    } else {
      outputText.value = "No attributes to show"
    };
   }
  &lt;/script&gt;
 &lt;/head&gt;

&lt;body&gt;
 &lt;p id="p1" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
 &lt;form action=""&gt;
  &lt;p&gt;&lt;input type="button" value="Show first attribute name and value"
      onclick="showFirstAttr();"&gt;
  &lt;input id="result" type="text" value=""&gt;&lt;/p&gt;
 &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<h3 id="Specification" name="Specification">External links</h3>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096">W3C DOM Level 2 Core: attributes</a></li>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-84CF096">W3C DOM Level 3 Core: attributes</a></li>
  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922">W3C DOM Level 3 NamedNodeMap interface</a></li>
</ul>
<p>Cross-browser compatibility considerations: on <a class="external" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a></p>
<p>{{ languages( { "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "pl": "pl/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}</p>
Revert to this revision