In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > getElementById (document, XMLDocument)

getElementById method (document, XMLDocument)

Browser support:

Returns the element with the specified id in the current document.

In HTML documents:
The getElementById method works differently in Internet Explorer before version 8 than in other browsers. It searches and returns the element matched by id and name attributes as well. Another difference is case-sensitivity.
- In Firefox, Opera, Google Chrome, Safari and in Internet Explorer from version 8, the getElementById method is case-sensitive for the value of the id attribute.
- In Internet Explorer earlier than version 8 (and in version 8 in IE7 or previous modes), it is not case-sensitive for the value of the id and name attributes.
Note: the getElementById method is not case-sensitive for the name of the id (and name) attributes in browsers. 'id', 'Id, 'iD' and 'ID' all designate id attributes.
In XML documents:
An ID attribute means an attribute with type of ID in XML documents. If the name of an attribute is 'id' (or 'ID', 'Id', 'iD'), it does not mean that the attribute is an ID attribute. Attribute names can be designated to be of type ID in the document type definition (DTD) of the XML document. See Example 2 for details.
- The getElementById method is not supported by Internet Explorer for XML documents.
- This method is supported by Google Chrome and Safari, but does not seem to work.
- In Firefox and Opera, the getElementById method can be used for attributes that are designated to be of type ID.
Note: in Opera, if the name of an attribute is 'xml:id', then it behaves as an ID attribute, regardless of the DTD.
Attribute names and values are case-sensitive in XML documents, so the getElementById method is case-sensitive as well.

The behavior of the getElementById method is not defined by W3C standards if more than one element has the specified ID, but browsers return the first matching element (by source order) in that case.

Syntax:

object.getElementById (ID);

You can find the related objects in the Supported by objects section below.

Parameters:

Required. String that specifies the id attribute value to look for.

Return value:

Returns the element with the specified id or null if it does not exist.

Example HTML code 1:

This example illustrates the use of the getElementById method in HTML documents:

<head>
    <script type="text/javascript">
        function TestGetElementById () {
            var elem = document.getElementById ("myDivision");
            if (elem) {     // Internet Explorer, Firefox, Opera, Google Chrome and Safari
                alert ("An element exists with myDivision ID (or name).");
            }
            else {
                alert ("No element exists with myDivision ID (or name).");
            }

                // case-sensitivity test
            var elem = document.getElementById ("mydivision");
            if (elem) {     // Internet Explorer earlier than version 8
                alert ("An element exists with mydivision ID (or name).");
            }
            else {      // Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 8
                alert ("No element exists with mydivision ID (or name).");
            }

                // test of the name attribute
            var elem = document.getElementById ("myAnchor");
            if (elem) {     // Internet Explorer
                alert ("An element exists with myAnchor ID (or name).");
            }
            else {      // Firefox, Opera, Google Chrome and Safari
                alert ("No element exists with myAnchor ID (or name).");
            }
        }
    </script>
</head>
<body>
    <div id="myDivision">An element with id="myDivision"</div>
    <a name="myAnchor">An element with name="myAnchor"</a>
    <br /><br /><br />
    <button onclick="TestGetElementById ()">Test the getElementById method!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the getElementById method in XML documents:

Code

ajax.js

ids.xml

<head>
    <script type="text/javascript" src="ajax.js"></script>
    
    <script type="text/javascript">
        var httpRequest = null;
        
        function SendRequest () {
            if (!httpRequest) {
                httpRequest = CreateHTTPRequestObject ();   // defined in ajax.js
            }
            if (httpRequest) {          
                    // The requested file must be in the same domain that the page is served from.
                var url = "ids.xml";
                httpRequest.open ("GET", url, true);    // async
                httpRequest.onreadystatechange = OnStateChange;
                httpRequest.send (null);
            }
        }

        function OnStateChange () {
            if (httpRequest.readyState == 0 || httpRequest.readyState == 4) {
                if (IsRequestSuccessful (httpRequest)) {    // defined in ajax.js
                    TestIDAttrs ();
                }
                else {
                    alert ("Operation failed.");
                }
            }
        }

        function TestIDAttrs () {
            var xmlDoc = ParseHTTPResponse (httpRequest);   // defined in ajax.js
            if (!xmlDoc)
                return;

            if (xmlDoc.getElementById) {    // Firefox, Opera, Google Chrome and Safari
                var item = xmlDoc.getElementById ("firstItem");
                if (item) {     // Firefox and Opera
                    alert ("An element exists with firstItem ID.");
                }
                else {      // Google Chrome and Safari
                    alert ("No element exists with firstItem ID.");
                }
                
                var item = xmlDoc.getElementById ("secondItem");
                if (item) {     // Opera
                    alert ("An element exists with secondItem ID.");
                }
                else {          // Firefox, Google Chrome and Safari
                    alert ("No element exists with secondItem ID.");
                }
            }
            else {  // Internet Explorer
                alert ("Your browser does not support the getElementById method!");
            }
        }

    </script>
</head>
<body>
    <button onclick="SendRequest ()">Test ID attributes</button>
</body>


function CreateHTTPRequestObject () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
    alert ("Your browser doesn't support XML handling!");
    return null;
}

function CreateMSXMLDocumentObject () {
    if (typeof (ActiveXObject) != "undefined") {
        var progIDs = [
                        "Msxml2.DOMDocument.6.0", 
                        "Msxml2.DOMDocument.5.0", 
                        "Msxml2.DOMDocument.4.0", 
                        "Msxml2.DOMDocument.3.0", 
                        "MSXML2.DOMDocument", 
                        "MSXML.DOMDocument"
                      ];
        for (var i = 0; i < progIDs.length; i++) {
            try { 
                return new ActiveXObject(progIDs[i]); 
            } catch(e) {};
        }
    }
    return null;
}

function CreateXMLDocumentObject (rootName) {
    if (!rootName) {
        rootName = "";
    }
    var xmlDoc = CreateMSXMLDocumentObject ();
    if (xmlDoc) {
        if (rootName) {
            var rootNode = xmlDoc.createElement (rootName);
            xmlDoc.appendChild (rootNode);
        }
    }
    else {
        if (document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument ("", rootName, null);
        }
    }
    
    return xmlDoc;
}

function ParseHTTPResponse (httpRequest) {
    var xmlDoc = httpRequest.responseXML;

            // if responseXML is not valid, try to create the XML document from the responseText property
    if (!xmlDoc || !xmlDoc.documentElement) {
        if (window.DOMParser) {
            var parser = new DOMParser();
            try {
                xmlDoc = parser.parseFromString (httpRequest.responseText, "text/xml");
            } catch (e) {
                alert ("XML parsing error");
                return null;
            };
        }
        else {
            xmlDoc = CreateMSXMLDocumentObject ();
            if (!xmlDoc) {
                return null;
            }
            xmlDoc.loadXML (httpRequest.responseText);

        }
    }

            // if there was an error while parsing the XML document
    var errorMsg = null;
    if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {
        errorMsg = "XML Parsing Error: " + xmlDoc.parseError.reason
                  + " at line " + xmlDoc.parseError.line
                  + " at position " + xmlDoc.parseError.linepos;
    }
    else {
        if (xmlDoc.documentElement) {
            if (xmlDoc.documentElement.nodeName == "parsererror") {
                errorMsg = xmlDoc.documentElement.childNodes[0].nodeValue;
            }
        }
    }
    if (errorMsg) {
        alert (errorMsg);
        return null;
    }

        // ok, the XML document is valid
    return xmlDoc;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE idTest [
    <!ATTLIST item id ID #IMPLIED>
]>
<idTest>
    <item id="firstItem" />
    <item xml:id="secondItem" />
</idTest>