Methods


getAttribute Method

Retrieves the value of the specified attribute.

Syntax

vAttrValue = object.getAttribute(sAttrName [, iFlags])

Parameters

sAttrName Required. String that specifies the name of the attribute.
iFlags Optional. Integer that specifies one or more of the following flags:
0
Default. Performs a property search that is not case-sensitive, and returns an interpolated value if the property is found.
1
Performs a case-sensitive property search. To find a match, the uppercase and lowercase letters in sAttrName must exactly match those in the attribute name.
2
Returns attribute value as a String. This flag does not work for event properties.
4
Returns attribute value as a fully expanded URL. Only works for URL attributes.

Return Value

Variant that returns a String, Integer, or Boolean value as defined by the attribute. If the attribute is not present, this method returns null.

Remarks

 New for Windows Internet Explorer 8 Internet Explorer 8 and later. IE8 mode enables several enhancements to the setAttribute, getAttribute, and removeAttribute methods that are not available when pages are displayed in earlier document modes.

  • The sAttrName parameter requires the name of the desired content attribute and not the Document Object Model (DOM) attribute. For example, in IE8 mode, this method no longer requires sAttrName to be "className" when setting, getting, or removing a CLASS attribute. Earlier versions of Internet Explorer and Internet Explorer 8 in compatibility mode still require sAttrName to specify the corresponding DOM property name.
  • The sAttrName parameter is not case sensitive. As a result, the iFlags parameter is no longer supported and should not be used.
  • The methods support event handlers. For example, the following code example defines an event handler to call a function called SomeFunction when the body of the page is loaded. 
    document.body.setAttribute('onload', 'SomeFunction()');

 New for Internet Explorer 8 Internet Explorer 8 or later. In IE8 mode, the value property is correctly reported as a canonical attribute name. For example, <input type="text" readonly> and <input type="text" readonly="readonly"> would both set the input text field to read-only. In IE8 mode, the value is evaluated as a cannonical value, "readonly". In IE7 and earlier modes, it is evaluated as a Boolean value, true. For more information, see Attribute Differences in Internet Explorer 8

If two or more attributes have the same name (differing only in uppercase and lowercase letters) and iFlags is 0, the getAttribute method retrieves values only for the last attribute created with this name, and ignores all other attributes with the same name.

 New for Internet Explorer 8 Internet Explorer 8 and later. In IE7 mode and IE5 mode, attributes that represent URLs and file paths return the same value whether you retrieve them as a DOM property or as a content attribute (using getAttribute). Some attributes return relative URLs, whereas others always return a fully qualified URL. In IE8 mode, DOM attributes always return fully qualified URLs for URL attributes; to retrieve the attribute value as specified in the content, use getAttribute. The following attributes return URLs: action, background, BaseHref, cite, codeBase, data, dynsrc, href, longDesc, lowsrc, pluginspage, profile, src, url, and vrml.

Example

The following example shows the difference between a URL attribute which is using a content attribute (value from getAttribute) and a DOM attribute (property).

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=8">
  <title>Content/DOM Attribute Example</title>
  <base href="http://msdn.microsoft.com/">
  <script>
    function GetAttr(){
     //Retrieve an element value from the content attribute and DOM attribute.
     var o = document.getElementById("msdn");
     
     var sContentAttr = o.getAttribute("href");
     var sDomAttr = o.href;
     
     var sOutput = ("Content attribute value: " + sContentAttr + 
              "<br/>DOM attribute value: " + sDomAttr);
     document.getElementById("output").innerHTML = sOutput;
    }
  </script>
</head>
<body onload="GetAttr()">
   <a id="msdn" href="en-us/default.aspx">Microsoft Developer Network</a>
   <div id="output">Output appears here.</div>
</body>
This feature requires Windows Internet Explorer 7 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This method is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 World Wide Web link.

Applies To

A, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, currentStyle, CUSTOM, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HEAD, hn, HR, HTML, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LINK, LISTING, MAP, MARQUEE, MENU, META, nextID, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, runtimeStyle, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR, WBR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

Tags :


Community Content

John Sudds
Obscure bug in getAttribute()

Be aware that there is an obscure bug in this method when used on a form element containing an input element which has the name attribute set to "id".
Example:

<form id="myForm1">
<input id="user_id" name="user_id" value="text" />
</form>
<form id="myForm2">
<input id="id" name="id" value="text" />
</form>
<script type="text/javascript">
var formElement1 = document.getElementById('myForm1');
var formElement2 = document.getElementById('myForm2');
alert(formElement1.getAttribute('id')+ "\n" + formElement2.getAttribute('id'));
</script>

You would expect it to display a JavaScript alert box containing:
myForm1
myForm2

But instead you get:
myForm1
[object]

It appears that this method erroneously returns the input with the name "id" instead of the value of the id attribute of the form itself. This also happens if you use formElement2.id .

To work around the bug, use attributes['id'].value or getAttributeNode('id').value

See: http://www.sixteensmallstones.org/ie-javascript-bugs-overriding-internet-explorers-documentgetelementbyid-to-be-w3c-compliant-exposes-an-additional-bug-in-getattributes (jmaxwilson)

----

[jsudds.msft] By way of explanation, this behavior is due in part to the adding the name attribute as an expando property of the <form> object. In this case, the name attribute overwrites a well-known property (id) in the DOM. The same thing would happen to any of the other properties if a well-known name was used, such as <input name='className' />. The getAttribute method in IE searches for property values using expandos and COM properties rather than the attribute node, as does setAttribute(). This combination of factors can lead to unexpected results.

Tags : dhtml

brothercake
iFlags does not behave as documented in IE6 and IE7
The value 2 for the iFlags parameter does not behave exactly as documented in IE6 and IE7: the value of a "style" attribute will return an empty string instead of the attribute value, and an attribute which evaluates to boolean true, such as disabled="disabled" will return 65535 (which is (2^16 - 1), the largest possible value of a 16-bit number, which in MS COM evaluates to VARIANT_TRUE)
Tags :

Page view tracker