Open In App
Related Articles

HTML DOM Header Object

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The DOM header object is used to represent the HTML <header> element. The header element can be accessed by the getElementById() method.

Syntax: 

document.getElementById("id"); 

Where ‘id’ is the ID assigned to the header tag.

Example 1: In the below program the header element is accessed and the color of the text inside the header element is changed. 

HTML

<!DOCTYPE html>
<html>
   
<body>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM header Object</h2>
    <article>
        <header id="head">
            <p>A computer science portal for geeks.</p>
        </header>
    </article>
    <button onclick="Geeks()">Click Here!</button>
    <script>
        function Geeks() {
            let doc = document.getElementById("head");
            doc.style.color = "green";
        }
    </script>
</body>
</html>

                    

Output: 

 

Example 2: Header Object can be created by using the document.createElement method.  

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM header Object</h2>
    <button onclick="Geeks()">Click Here!</button>
    <p id="head" style="color:green;"></p>
    <script>
        function Geeks() {
            let x = document.createElement("HEADER");
            document.body.appendChild(x);
 
            let doc = document.createElement("H3");
            let t = document.createTextNode(
                      "A computer science portal for geeks.");
            doc.appendChild(t);
            document.getElementById("head").appendChild(doc);
        }
    </script>
</body>
</html>

                    

Output: 

 

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer (after IE 8.0)
  • Safari
  • Opera


Last Updated : 14 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads