HTML DOM Footer Object: Accessing Footer Elements

The HTML DOM <footer> object provides a way to access and manipulate HTML <footer> elements in your web pages using JavaScript. The <footer> element typically contains information about the document or section, such as copyright notices, contact information, or links to terms of use. This article will guide you through accessing and modifying <footer> elements using the DOM.

What is the HTML DOM Footer Object?

The HTML DOM Footer object represents an HTML <footer> element. It allows you to:

• Access the properties of the <footer> element.
• Modify the content and attributes of the <footer> element.
• Add or remove event listeners to the <footer> element.
• Style the <footer> element dynamically.

Syntax

To access a <footer> element using JavaScript, you typically use document.getElementById(), document.querySelector(), or other similar DOM methods. Once you have a reference to the <footer> element, you can use its properties and methods to interact with it.

// Using document.getElementById()
const footerElementById = document.getElementById("myFooter");

// Using document.querySelector()
const footerElementByQuery = document.querySelector("footer");

HTML Footer Attributes

The <footer> element supports global HTML attributes as well as specific attributes, although not many specific attributes are unique to the footer. The common attributes are described below.

Attribute	Type	Description
`id`	String	A unique identifier for the `
`class`	String	Specifies one or more class names for the element, used for styling with CSS.
`style`	String	Inline CSS styles for the element.
`title`	String	Provides additional information about the `
`dir`	String	Specifies the text direction for the content within the `
`lang`	String	Specifies the language of the text content in the `

Accessing Footer Elements

Let’s start with examples of accessing <footer> elements using different DOM methods.

Example 1: Accessing a Footer by ID

In this example, we access a <footer> element by its id and change its text content.

<footer id="myFooter" style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
  <p>Original footer content.</p>
</footer>

<button id="changeFooterTextBtn">Change Footer Text</button>

<script>


  const footerById = document.getElementById("myFooter");
  const changeTextButton = document.getElementById("changeFooterTextBtn");

  changeTextButton.addEventListener("click", function() {
        footerById.innerHTML = "<p>Footer text changed by button click!</p>";
  });


</script>

Output:

Initially, the footer contains “Original footer content.” Upon clicking the “Change Footer Text” button, the footer will update to “Footer text changed by button click!”

Example 2: Accessing a Footer by Tag Name

This example accesses the <footer> element by its tag name using document.querySelector() and modifies its style.

 <footer style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
        <p>Default Footer Content.</p>
    </footer>
    <button id="changeFooterStyleBtn">Change Footer Style</button>

<script>


      const footerByTag = document.querySelector("footer");
      const changeStyleButton = document.getElementById("changeFooterStyleBtn");

        changeStyleButton.addEventListener("click", function() {
            footerByTag.style.backgroundColor = "lightgreen";
            footerByTag.style.color = "black";
        });


</script>

Output:

Initially, the footer has the default styling. Clicking the “Change Footer Style” button will change the background color to lightgreen and the text color to black.

Example 3: Adding a Footer Dynamically

This example demonstrates how to create and append a <footer> element to the document body using JavaScript.

<button id="addFooterBtn">Add Footer</button>

<div id="footerContainer" style="margin-top: 10px; border: 1px dotted #ddd; padding: 10px;"></div>

<script>


    const addFooterButton = document.getElementById("addFooterBtn");
    const footerContainer = document.getElementById("footerContainer");

    addFooterButton.addEventListener("click", function() {
        const newFooter = document.createElement("footer");
        newFooter.innerHTML = "<p>Dynamically added footer.</p>";
        newFooter.style.border = "1px solid #ddd";
        newFooter.style.padding = "10px";
        footerContainer.appendChild(newFooter);
    });


</script>

Output:

Initially, there is no footer. When the “Add Footer” button is clicked, a new <footer> element is created and appended to the page with the message “Dynamically added footer”.

Example 4: Adding Event Listener to the Footer

This example adds a simple click event listener to a footer that alerts a message when the footer is clicked.

<footer id="eventFooter" style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px;">
    Click this Footer to see the Alert
</footer>

<script>


  const eventFooter = document.getElementById("eventFooter");

    eventFooter.addEventListener("click", function() {
        alert("Footer was clicked!");
    });


</script>

Output:

Clicking on the footer will display an alert message: “Footer was clicked!”

Practical Uses of the Footer Object

The HTML DOM Footer object can be used to:

• Dynamically update copyright information: Automatically update the current year in the copyright notice.
• Implement user interactions: Add click handlers to specific elements within the footer (e.g., contact information links).
• Load content dynamically: Fetch footer content from an external source and populate it.
• Change footer styles based on user actions: Modify the visual appearance of the footer based on user interactions (e.g., theme changes).
• Create accessible footers: Enhance usability by adding ARIA attributes and ensuring proper semantic structure.

Browser Support

The HTML <footer> element and the corresponding DOM Footer object are widely supported across all modern browsers.

Note: It’s always recommended to test your web pages across different browsers to ensure consistency. 🧐

Conclusion

The HTML DOM Footer object is a crucial part of manipulating and controlling footer elements within your web pages. With the ability to access properties, modify content, and add event listeners, you can create dynamic and interactive footer sections that enhance the user experience and improve site accessibility. By leveraging the DOM methods and techniques described in this article, you can build more robust and user-friendly web applications.