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

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

documentElement property (document, XMLDocument)

Browser support:

Returns a reference to the root element node of the document.

It retrieves the html element in HTML documents and the root node in XML documents.

The documentElement property is used principally for calculating the size of the browser's client area. The clientWidth and clientHeight properties of the html element retrieve the width and height of the client area, but these values require some correction in Internet Explorer earlier than version 8. For further details, please see the pages for the clientWidth and clientHeight properties and the Example 1 below.

Syntax:

object.documentElement;

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

This property is read-only.

Possible values:

Reference to the root node.

Default: this property has no default value.

Example HTML code 1:

This example shows a cross-browser solution to get the size of the browser's client area in the current pixel size of the document. Try to zoom in and out (CTRL and +, CTRL and -) and refresh the page (F5).

<head>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetWindowSize () {
            var zoomFactor = GetZoomFactor ();
            var w = Math.round (document.documentElement.clientWidth / zoomFactor);
            var h = Math.round (document.documentElement.clientHeight / zoomFactor);

            var info = document.getElementById ("info");
            info.innerHTML = w + "px * " + h + "px";
        }
    </script>
</head>
<body onload="GetWindowSize ()">
    Size of the browser's client area:
    <span id="info" style="margin-left:20px;"></span>
    <div style="width:500px; height:1000px; background-color:#e0a0a0;">Size of this element: 500px * 1000px</div>
</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 documentElement property in XML documents. If the format of an XML files is invalid, then an error message can be retrieved by the documentElement property:

Code

ajax.js

invalid.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 = "invalid.xml";
                httpRequest.open ("GET", url, false);   // synchron
                httpRequest.send (null);
                FillTable ();
            }
        }

        function FillTable () {
            var xmlDoc = ParseHTTPResponse (httpRequest);   // defined in ajax.js
            if (xmlDoc) {
                alert ("The name of the root element: " + xmlDoc.documentElement.nodeName);
            }
            else {
                    // display error message
                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);
                }
                else {
                    alert ("There was an error while loading XML file!");
                }
                return;
            }
        }
    </script>
</head>
<body onload="SendRequest ()">
</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"?>
<invalid>
    <missingClosingTag>
</invalid>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by objects:

document, XMLDocument

html

External links:

documentElement (MSDN)
documentElement (Mozilla Developer Center)
documentElement (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments