The HTML DOM documentElement property is used for returning the document element. The return type is of type Element Object. The document element is the root element of the document which in case of an HTML document will be the <HTML> element. It is a read-only property.
Syntax
Following is the syntax for documentElement property −
document.documentElement
Example
Let us look at an example of the documentElement property −
<!DOCTYPE html>
<html>
<body>
<h1>documentElement property example</h1>
<p>Get the document element name by clicking the below button</p>
<button onclick="getDocument()">GET NAME</button>
<p id="Sample"></p>
<script>
function getDocument() {
var dName = document.documentElement.nodeName;
document.getElementById("Sample").innerHTML = "The document element for this document is: "+dName;
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the GET NAME button −
In the above example −
We have created a button GET NAME that will execute the getDocument() function on being clicked by the user.
<button onclick="getDocument()">GET NAME</button>
The getDocument() function gets the documents’ documentElement nodeName property and assigns it to the variable dName. The variable dName is then displayed in the paragraph that has id “Sample” associated with it and used the innerHTML property to display the intended text −
function getDocument() {
var dName = document.documentElement.nodeName;
document.getElementById("Sample").innerHTML = "The document element for this document is: "+dName;
}