HTML DOM Figure Object: Accessing and Manipulating Figure Elements

The HTML DOM Figure object represents the <figure> element in HTML. This element is used to encapsulate media content, such as images, illustrations, diagrams, code snippets, etc., and is often associated with a caption provided by a <figcaption> element. Using the DOM Figure object, you can access and manipulate these elements via JavaScript, allowing for dynamic web content and interactive experiences. This guide will cover the methods and properties of the Figure object, providing clear examples to enhance your understanding.

What is the HTML <figure> Element?

The <figure> element is a semantic HTML tag used to represent self-contained content, often accompanied by a caption. It is commonly used to group images, illustrations, diagrams, code listings, and other media with explanatory captions. Using the <figure> tag helps improve the structure and semantics of your HTML documents. The <figcaption> element is typically placed inside <figure> to provide the caption.

Purpose of the Figure Object

The purpose of the HTML DOM Figure object is to:

• Provide JavaScript access to the <figure> element and its associated properties.
• Enable dynamic modification of <figure> content.
• Facilitate event handling on <figure> elements.
• Allow for interactive behavior of media content.

Accessing the Figure Object

You can access the <figure> element using standard DOM methods like getElementById(), querySelector(), getElementsByTagName(), and getElementsByClassName(). Once you have the Figure object, you can manipulate its properties and content.

Syntax

The basic syntax for accessing the <figure> element is:

const figureElement = document.getElementById("yourFigureId"); // Using getElementById
const figureElement_2 = document.querySelector(".yourFigureClass"); // Using querySelector
const figureElements = document.getElementsByTagName("figure"); // Using getElementsByTagName
const figureElements_2 = document.getElementsByClassName("yourFigureClass"); // Using getElementsByClassName

Figure Object Properties and Methods

The Figure object inherits properties and methods from its parent HTMLElement interface, and it doesn’t introduce many figure-specific properties or methods besides the generic ones. The most useful methods and properties are:

Property/Method	Type	Description
`id`	String	Gets or sets the `id` attribute of the element.
`className`	String	Gets or sets the class attribute of the element.
`innerHTML`	String	Gets or sets the HTML content of the element.
`textContent`	String	Gets or sets the text content of the element.
`style`	Object	Gets or sets the inline style of the element.
`getAttribute(name)`	Function	Gets the value of the attribute specified by `name`.
`setAttribute(name, value)`	Function	Sets the value of the attribute specified by `name`.
`addEventListener(event, function)`	Function	Attaches an event handler to the element.
`removeEventListener(event, function)`	Function	Removes an event listener from the element.

Note: The Figure object doesn’t have specific properties or methods unique to figures other than standard HTMLElement methods and properties. 💡

Practical Examples

Let’s explore how to use the Figure object with practical examples.

Accessing a Figure Element by ID

This example demonstrates accessing a <figure> element using its ID.

<figure id="myFigure" style="border: 1px solid #ddd; padding: 10px; width: 300px;">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Sample Image" style="display: block; margin: 0 auto;">
  <figcaption style="text-align: center;">A Sample Image</figcaption>
</figure>

<script>


  const figureElement_id = document.getElementById("myFigure");
  console.log("Figure ID:", figureElement_id.id);
  console.log("Figure HTML Content:", figureElement_id.innerHTML);


</script>

Output in Console:

Figure ID: myFigure
Figure HTML Content:
<img src="https://dummyimage.com/200x150/000/fff" alt="Sample Image" style="display: block; margin: 0 auto;">
<figcaption style="text-align: center;">A Sample Image</figcaption>

Changing a Figure’s Content

This example shows how to change the inner HTML of a <figure> element, thus modifying its content dynamically.

<figure id="myFigure2" style="border: 1px solid #ddd; padding: 10px; width: 300px;">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Original Image" style="display: block; margin: 0 auto;">
  <figcaption style="text-align: center;">Original Caption</figcaption>
</figure>

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

<script>


  const figureElement_content = document.getElementById("myFigure2");
  const changeContentBtn = document.getElementById("changeContentBtn");

  changeContentBtn.addEventListener("click", () => {
    figureElement_content.innerHTML = `
      <img src="https://dummyimage.com/200x150/00f/fff" alt="New Image" style="display: block; margin: 0 auto;">
      <figcaption style="text-align: center;">New Caption</figcaption>
    `;
  });


</script>

Clicking the “Change Content” button will replace the figure’s original content with the new image and caption.

Styling a Figure Element Dynamically

Here’s how to dynamically apply CSS styles using JavaScript:

<figure id="myFigure3" style="border: 1px solid #ddd; padding: 10px; width: 300px;">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Sample Image" style="display: block; margin: 0 auto;">
  <figcaption style="text-align: center;">A Sample Image</figcaption>
</figure>

<button id="styleBtn">Style Figure</button>

<script>


  const figureElement_style = document.getElementById("myFigure3");
  const styleBtn = document.getElementById("styleBtn");

  styleBtn.addEventListener("click", () => {
    figureElement_style.style.borderColor = "blue";
    figureElement_style.style.backgroundColor = "#f0f0f0";
    figureElement_style.style.padding = "20px";
  });


</script>

Clicking the “Style Figure” button will change the figure’s border color, background color, and padding.

Adding Event Listeners to a Figure

This example shows how to add event listeners to a <figure> element.

<figure id="myFigure4" style="border: 1px solid #ddd; padding: 10px; width: 300px; text-align: center;">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Sample Image" style="display: block; margin: 0 auto;">
  <figcaption>Click Me!</figcaption>
</figure>

<p id="messageBox">No Message</p>

<script>


  const figureElement_event = document.getElementById("myFigure4");
  const messageBox = document.getElementById("messageBox");

  figureElement_event.addEventListener("click", () => {
    messageBox.textContent = "Figure Clicked!";
  });


</script>

Clicking the figure will display “Figure Clicked!” below the figure.

Using getAttribute() and setAttribute()

This example shows how to use getAttribute() and setAttribute() methods on a <figure> element:

<figure id="myFigure5" data-type="image" style="border: 1px solid #ddd; padding: 10px; width: 300px;">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Sample Image" style="display: block; margin: 0 auto;">
  <figcaption style="text-align: center;">A Sample Image</figcaption>
</figure>

<button id="attributeBtn">Change Attribute</button>

<script>


  const figureElement_attribute = document.getElementById("myFigure5");
  const attributeBtn = document.getElementById("attributeBtn");

  console.log("Initial data-type:", figureElement_attribute.getAttribute("data-type"));

  attributeBtn.addEventListener("click", () => {
    figureElement_attribute.setAttribute("data-type", "diagram");
     console.log("Updated data-type:", figureElement_attribute.getAttribute("data-type"));
  });


</script>

Output in Console:

Initial data-type: image
Updated data-type: diagram

Initially the data-type attribute is “image”, after clicking the button, it will change to “diagram”.

Use Cases

The HTML DOM Figure object is useful in many scenarios:

• Dynamic Image Galleries: Updating image content in a gallery based on user interaction.
• Interactive Diagrams: Dynamically displaying diagrams and illustrations based on user selections.
• Content Management: Modifying figure content and captions in a content management system.
• Accessibility Enhancement: Changing figure content for screen readers to improve accessibility.
• Responsive Design: Modifying figure styles and properties to adapt to different screen sizes.

Browser Support

The <figure> element and the corresponding DOM Figure object are well-supported across modern web browsers.

Note: Always test your code across various browsers to ensure compatibility and a consistent user experience. ✅

Conclusion

The HTML DOM Figure object provides a powerful interface for accessing and manipulating <figure> elements in web pages. By using JavaScript, you can dynamically control figure content, styles, and interactivity, enhancing the overall user experience and making your web content more engaging. Understanding the properties and methods of the Figure object allows you to create advanced web features involving images, media, and associated captions.