What is HTML DOM Section Object?

In this article, we will learn HTML DOM Section Object,This free HTML tutorial for complete beginners will help you learn HTML from scratch.

HTML DOM Section Object - ❤️HTML Tutorials In 2024

The Section Object in HTML DOM is used to represent the HTML <section> element. The section element can be accessed by using the getElementById() method.

Syntax:

document.getElementById("id")

Where id is assigned to the <section> tag.

Example 1: In this example, we will use DOM Section Object.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM section Object
    </title>
</head>
   
<body style="text-align:center;">
    <h1 style="color:green;">
        w3wiki
    </h1>
    <h2>DOM section Object</h2>
    <button onclick="Beginner()">
        Click Here
    </button>
    <br><br>
    <section id="sec">
        A computer science portal for Beginner.
    </section>
   
    <script>
        function Beginner() {
            let txt = document.getElementById("sec");
            txt.style.color = "green";
        }
    </script>
</body>
   
</html>

Output:

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

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM section Object
    </title>
</head>
<body>
    <h1 style="color:green;">
        w3wiki
    </h1>
    <h2>DOM section Object</h2>
    <button onclick="Beginner()">
        Click Here!
    </button><br>
   
    <script>
        function Beginner() {
            let x = document.createElement("SECTION");
            x.setAttribute("id", "sec");
            document.body.appendChild(x);
 
            let para = document.createElement("H5");
            let txt = document.createTextNode(
                        "This text belongs to section.");
            para.appendChild(txt);
            document.getElementById("sec").appendChild(para);
        }
    </script>
</body>
   
</html>

Output:

Supported Browsers:

Google Chrome
Mozilla Firefox
Edge
Safari
Opera