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 Heading object
The HTML DOM Heading object represents any of the HTML heading elements from <h1> to <h6>. These objects allow you to create, access, and manipulate heading elements dynamically using JavaScript. You can create new heading elements with createElement() and access existing ones with methods like getElementById().
Syntax
Following is the syntax for creating a Heading object −
var headingElement = document.createElement("H1");
Following is the syntax for accessing an existing Heading object −
var headingElement = document.getElementById("headingId");
Creating Heading Elements
The createElement() method can create any heading level from H1 to H6. Once created, you can add text content and append the heading to the DOM.
Example − Creating H1 Element
<!DOCTYPE html>
<html>
<head>
<title>Heading Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML DOM Heading Object Demo</h2>
<p>Click the button to create a new H1 element:</p>
<button onclick="createH1()">CREATE H1</button>
<div id="output"></div>
<script>
function createH1() {
var h = document.createElement("H1");
var txt = document.createTextNode("H1 element has been created dynamically!");
h.appendChild(txt);
h.style.color = "blue";
document.getElementById("output").appendChild(h);
}
</script>
</body>
</html>
The output shows the button and dynamically created heading −
HTML DOM Heading Object Demo Click the button to create a new H1 element: [CREATE H1] (After clicking button:) H1 element has been created dynamically! (blue, large heading text)
Example − Creating Multiple Heading Levels
Following example demonstrates creating different heading levels −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Heading Levels</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Create Different Heading Levels</h2>
<button onclick="createHeading('H1')">Create H1</button>
<button onclick="createHeading('H3')">Create H3</button>
<button onclick="createHeading('H5')">Create H5</button>
<div id="container"></div>
<script>
function createHeading(level) {
var heading = document.createElement(level);
var text = document.createTextNode("This is a " + level + " heading");
heading.appendChild(text);
heading.style.margin = "10px 0";
document.getElementById("container").appendChild(heading);
}
</script>
</body>
</html>
Each button creates a heading of different size, demonstrating the hierarchy from H1 (largest) to H5 (smaller).
Accessing Existing Heading Elements
You can access and modify existing heading elements using various DOM methods.
Example − Modifying Existing Headings
<!DOCTYPE html>
<html>
<head>
<title>Access Heading Objects</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1 id="mainHeading">Original Heading Text</h1>
<h2 class="subHeading">Subheading 1</h2>
<h2 class="subHeading">Subheading 2</h2>
<button onclick="changeById()">Change by ID</button>
<button onclick="changeByClass()">Change by Class</button>
<button onclick="changeByTag()">Change by Tag</button>
<script>
function changeById() {
var heading = document.getElementById("mainHeading");
heading.textContent = "Heading changed by ID!";
heading.style.color = "red";
}
function changeByClass() {
var headings = document.getElementsByClassName("subHeading");
for(var i = 0; i < headings.length; i++) {
headings[i].textContent = "Modified Subheading " + (i + 1);
headings[i].style.backgroundColor = "yellow";
}
}
function changeByTag() {
var allHeadings = document.getElementsByTagName("h2");
for(var i = 0; i < allHeadings.length; i++) {
allHeadings[i].style.fontStyle = "italic";
}
}
</script>
</body>
</html>
This example shows three different ways to access and modify heading elements: by ID, by class name, and by tag name.
Heading Object Properties and Methods
Heading objects inherit all standard HTML element properties and methods. Common ones include −
textContent − Gets or sets the text content of the heading
innerHTML − Gets or sets the HTML content inside the heading
style − Access to CSS styling properties
className − Gets or sets the class attribute
appendChild() − Adds a child element
addEventListener() − Attaches event listeners
Example − Using Heading Properties
<!DOCTYPE html>
<html>
<head>
<title>Heading Properties Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1 id="demo">Interactive Heading</h1>
<button onclick="showProperties()">Show Properties</button>
<button onclick="addEvent()">Add Click Event</button>
<p id="info"></p>
<script>
function showProperties() {
var heading = document.getElementById("demo");
var info = "Tag: " + heading.tagName +
", Text: " + heading.textContent +
", ID: " + heading.id;
document.getElementById("info").textContent = info;
}
function addEvent() {
var heading = document.getElementById("demo");
heading.addEventListener("click", function() {
this.style.color = this.style.color === "purple" ? "black" : "purple";
});
heading.style.cursor = "pointer";
document.getElementById("info").textContent = "Click the heading to change color!";
}
</script>
</body>
</html>
This demonstrates accessing heading properties and adding interactive behavior to heading elements.
Conclusion
The HTML DOM Heading object provides complete control over heading elements (H1-H6) through JavaScript. You can create new headings dynamically with createElement(), access existing ones with various selection methods, and modify their content, styling, and behavior. This makes heading objects essential for building interactive and dynamic web pages.
569 Views
