Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM HTML Object
The HTML DOM HTML Object represents the <html> element of an HTML document. This object provides access to the root element that contains all other HTML elements on the page, including the <head> and <body> sections.
The HTML object is useful for accessing document-wide properties, manipulating the entire document structure, or retrieving all content within the HTML element. It serves as the top-level container for all page elements.
Syntax
Following is the syntax to access the HTML object using getElementsByTagName() −
document.getElementsByTagName("HTML")[0]
Alternative syntax using documentElement property −
document.documentElement
Accessing HTML Object Properties
The HTML object provides several useful properties for document manipulation −
innerHTML − Gets or sets the HTML content inside the
<html>elementlang − Gets or sets the language attribute of the HTML element
dir − Gets or sets the text direction (ltr or rtl)
className − Gets or sets the class attribute
Example − Accessing HTML Content
Following example demonstrates how to access and display the entire HTML content −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object Example</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
.btn {
background-color: lightblue;
border: none;
height: 2rem;
border-radius: 50px;
width: 60%;
margin: 1rem auto;
cursor: pointer;
}
.show {
font-size: 1rem;
font-weight: bold;
color: orange;
border: 2px solid green;
padding: 10px;
display: none;
text-align: left;
overflow: auto;
max-height: 200px;
}
</style>
</head>
<body>
<h1>DOM HTML Object Example</h1>
<button type="button" onclick="getContent()" class="btn">Click me to get content inside HTML tag</button>
<div class="show"></div>
<script>
function getContent() {
var content = document.getElementsByTagName("HTML")[0].innerHTML;
document.querySelector(".show").innerHTML = content;
document.querySelector(".show").style.display = "block";
}
</script>
</body>
</html>
Clicking the button displays all the HTML content inside the <html> element, showing the complete structure of the page.
Example − HTML Object Properties
Following example shows how to access and modify HTML object properties −
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>HTML Object Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>HTML Object Properties</h2>
<button onclick="showProperties()">Show HTML Properties</button>
<button onclick="changeLanguage()">Change Language to French</button>
<div id="result" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>
<script>
function showProperties() {
var htmlElement = document.documentElement;
var result = document.getElementById("result");
result.innerHTML = "<strong>HTML Properties:</strong><br>" +
"Language: " + htmlElement.lang + "<br>" +
"Direction: " + htmlElement.dir + "<br>" +
"Tag Name: " + htmlElement.tagName;
}
function changeLanguage() {
document.documentElement.lang = "fr";
alert("Language changed to French (fr)");
}
</script>
</body>
</html>
This example demonstrates reading HTML element properties and dynamically changing the language attribute.
HTML Properties: Language: en Direction: ltr Tag Name: HTML
Using document.documentElement
The preferred method to access the HTML object is through document.documentElement, which directly returns the root HTML element without needing array indexing.
Example − Document Element Method
<!DOCTYPE html>
<html>
<head>
<title>Document Element Access</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Accessing HTML Element</h2>
<button onclick="compareAccess()">Compare Access Methods</button>
<div id="output" style="margin-top: 15px; padding: 10px; background-color: #f5f5f5;"></div>
<script>
function compareAccess() {
var method1 = document.getElementsByTagName("HTML")[0];
var method2 = document.documentElement;
var output = document.getElementById("output");
output.innerHTML = "Method 1 (getElementsByTagName): " + (method1.tagName) + "<br>" +
"Method 2 (documentElement): " + (method2.tagName) + "<br>" +
"Both methods return the same element: " + (method1 === method2);
}
</script>
</body>
</html>
Both methods return the same HTML element, but document.documentElement is more direct and efficient.
Method 1 (getElementsByTagName): HTML Method 2 (documentElement): HTML Both methods return the same element: true
Common Use Cases
The HTML DOM object is commonly used for −
Document-wide styling − Adding CSS classes to the HTML element
Language detection − Reading or setting the document language
Content extraction − Getting the entire page content for processing
Root-level event handling − Attaching events to the document root
Conclusion
The HTML DOM HTML Object provides access to the root <html> element and its properties. Use document.documentElement for direct access or document.getElementsByTagName("HTML")[0] for array-based access. This object is essential for document-wide operations and accessing the complete page structure.
393 Views
