HTML DOM Section Object: Accessing and Manipulating <section> Elements

The HTML DOM Section object represents an HTML <section> element. This element is used to group thematically related content within a document, and the Section object allows you to access and manipulate these sections using JavaScript. This article provides a comprehensive guide on how to interact with <section> elements through their corresponding DOM objects.

What is the HTML <section> Element?

The <section> element is a semantic HTML tag that defines a section in a document. It’s often used to group content that is related, such as chapters, articles, or parts of a webpage. Using <section> elements not only improves the structure and organization of your HTML but also enhances accessibility and SEO.

Accessing Section Elements

To access a <section> element in the DOM, you typically use methods like document.getElementById(), document.querySelector(), or document.querySelectorAll(). Once you have a reference to the section element, you can access its properties and methods through the Section object.

Syntax

The syntax for accessing the <section> element and its properties using JavaScript is straightforward:

// Get the section element using its ID
const sectionElement = document.getElementById("mySection");

// Alternatively, use querySelector
const sectionElementQuery = document.querySelector("section.mySectionClass");

// Or get all section elements
const allSectionElements = document.querySelectorAll("section");

Section Object Properties

The Section object inherits most properties from its parent HTMLElement object. Here are a few key properties you might use frequently:

Property	Type	Description
`id`	String	The ID of the section element.
`className`	String	The class name(s) of the section element.
`innerHTML`	String	The HTML content inside the section element.
`textContent`	String	The text content inside the section element.
`style`	Object	The inline styles applied to the section element.
`children`	HTMLCollection	A collection of the child elements of the section element.
`parentNode`	HTMLElement	The parent node of the section element.
`offsetHeight`	Number	The height of the section element including padding, border and scrollbar.
`offsetWidth`	Number	The width of the section element including padding, border and scrollbar.

Examples

Let’s explore some practical examples of how to use the Section object.

Basic Access and Modification

In this example, we’ll access a section element by its ID and modify its content.

<section id="sectionExample1">
  <p>This is the original content of the section.</p>
</section>

<button id="btnChangeContent1">Change Content</button>

<script>
  const section_example1 = document.getElementById("sectionExample1");
  const btn_change_content1 = document.getElementById("btnChangeContent1");
  btn_change_content1.addEventListener("click", () => {
    section_example1.innerHTML = "<p>This is the new content of the section.</p>";
  });
</script>

Output:

Initially, the section displays “This is the original content of the section.” After clicking the “Change Content” button, the section will display: “This is the new content of the section.”

Changing Styles

Here’s how to change the style of a section element using the style property.

<section id="sectionExample2">
  <p>This section has no style initially.</p>
</section>

<button id="btnChangeStyle2">Change Style</button>

<script>
  const section_example2 = document.getElementById("sectionExample2");
  const btn_change_style2 = document.getElementById("btnChangeStyle2");
    btn_change_style2.addEventListener("click", () => {
      section_example2.style.backgroundColor = "lightgreen";
      section_example2.style.padding = "20px";
      section_example2.style.border = "1px solid green";
    });
</script>

Output:

Initially, the section has no specific style. After clicking the “Change Style” button, the section’s background color becomes light green, it gets a 20px padding, and a 1px solid green border.

Adding a New Child Element

This example shows how to dynamically add a new element as a child of the section.

<section id="sectionExample3">
  <p>Initial content of the section.</p>
</section>

<button id="btnAddChild3">Add Child</button>

<script>
  const section_example3 = document.getElementById("sectionExample3");
  const btn_add_child3 = document.getElementById("btnAddChild3");
  btn_add_child3.addEventListener("click", () => {
    const newParagraph = document.createElement("p");
    newParagraph.textContent = "This is a new paragraph.";
    section_example3.appendChild(newParagraph);
  });
</script>

Output:

Initially, the section shows “Initial content of the section.” Clicking “Add Child” appends a new paragraph with the text “This is a new paragraph.” to the section.

Iterating Through Child Elements

Here’s how to iterate through the child elements of a section using the children property.

<section id="sectionExample4">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <div>A div element</div>
</section>

<button id="btnIterate4">Iterate</button>
<ul id="childList4"></ul>

<script>
  const section_example4 = document.getElementById("sectionExample4");
  const btn_iterate4 = document.getElementById("btnIterate4");
  const child_list4 = document.getElementById("childList4");

   btn_iterate4.addEventListener("click", () => {
    child_list4.innerHTML = '';
    for (const child of section_example4.children) {
        const listItem = document.createElement('li');
        listItem.textContent = child.tagName;
        child_list4.appendChild(listItem);
    }
   });
</script>

Output:

Initially, the section displays three child elements. After clicking “Iterate”, a list appears showing the tag names of the child elements: “P”, “P”, and “DIV”.

Getting offsetWidth and offsetHeight

This example shows how to use the offsetWidth and offsetHeight properties.

<section id="sectionExample5" style="border:1px solid black; padding:20px; display:inline-block;">
  <p>This section has padding and a border.</p>
</section>

<div id="sizeDisplay5"></div>

<script>
  const section_example5 = document.getElementById("sectionExample5");
  const size_display5 = document.getElementById("sizeDisplay5");

  function updateSizeDisplay() {
    const width = section_example5.offsetWidth;
    const height = section_example5.offsetHeight;
    size_display5.textContent = `Section Width: ${width}px, Section Height: ${height}px`;
  }

   updateSizeDisplay();
   window.addEventListener('resize', updateSizeDisplay);
</script>

Output:

Initially, it displays the initial size of the section. As you resize the window, it will dynamically update.

Real-World Applications of the Section Object

The Section object is widely used in web development for:

• Dynamic Content Manipulation: Updating the content of sections based on user interactions or data changes.
• Interactive Navigation: Creating navigation systems where sections dynamically appear or change in response to user actions.
• Layout Control: Adjusting the styles and layout of sections for responsive design.
• Accessibility Enhancements: Structuring content for screen readers and other assistive technologies.
• Modular Design: Building modular page structures for maintainability.

Browser Support

The HTML <section> element and the corresponding Section object are well-supported across all modern browsers.

Conclusion

The HTML DOM Section object is an essential tool for web developers, enabling dynamic interaction with <section> elements through JavaScript. With the ability to access, modify, and enhance section elements, you can create more interactive, responsive, and well-structured web pages. Understanding how to use the Section object effectively empowers you to build complex and dynamic web experiences.