HTML DOM Object Object: Accessing and Manipulating Embedded Objects

The HTML <object> element is a powerful tool for embedding external resources, such as images, PDFs, videos, and even other HTML documents, directly into a webpage. The Document Object Model (DOM) provides a way to interact with these embedded objects using JavaScript, allowing dynamic manipulation and control. This article will guide you through accessing and working with <object> elements using the DOM API.

What is the HTML <object> Element?

The HTML <object> element embeds external content in a web page. The content is defined by the data attribute, which specifies the URL of the resource to be embedded. Other attributes such as type, width, and height can also be defined to provide additional context for the embedded content.

<object data="example.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser does not support PDFs. <a href="example.pdf">Download it</a> instead.</p>
</object>

Purpose of the HTML DOM Object Object

The HTML DOM Object Object allows you to:

• Access and modify the attributes of <object> elements.
• Control the display and behavior of embedded resources.
• Interact with the embedded content, if supported.
• Respond to events associated with the <object> element.

Accessing the <object> Element

To access an <object> element using JavaScript, you typically use the document.getElementById() method or similar DOM traversal techniques. Once accessed, you can interact with its properties and methods.

Syntax

const objectElement = document.getElementById("yourObjectId");

Here, "yourObjectId" is the id attribute of the <object> element.

Key Properties and Methods

The HTML DOM Object Object provides several properties and methods that are useful for manipulating <object> elements.

Property/Method	Type	Description
`data`	String	Gets or sets the URL of the resource to be embedded.
`type`	String	Gets or sets the MIME type of the resource.
`width`	String	Gets or sets the width of the embedded object.
`height`	String	Gets or sets the height of the embedded object.
`contentDocument`	Document	Returns the document object of the embedded resource (if available).
`contentWindow`	Window	Returns the window object of the embedded resource (if available).
`form`	HTMLFormElement	Returns the form element that the object belongs to, if any.
`name`	String	Gets or sets the name of the object element.
`align`	String	Gets or sets the alignment of the object.

Basic Examples

Let’s look at some examples that demonstrate how to access and manipulate <object> elements.

Example 1: Accessing and Displaying Object Attributes

In this example, we access an <object> element and display its data and type attributes.

<object
  id="myObject1"
  data="sample.pdf"
  type="application/pdf"
  width="500"
  height="300"
  style="border: 1px solid #ddd;"
>
  <p>Your browser does not support PDFs. <a href="sample.pdf">Download it</a> instead.</p>
</object>

<div id="output1"></div>

<script>
  const objElement1 = document.getElementById("myObject1");
  const outputDiv1 = document.getElementById("output1");

  if (objElement1) {
    const dataValue1 = objElement1.data;
    const typeValue1 = objElement1.type;
    outputDiv1.innerHTML = `Data: ${dataValue1}, Type: ${typeValue1}`;
  }
</script>

Example 2: Changing the Object’s Data Source

This example demonstrates how to change the data attribute of an <object> element using JavaScript.

<object
  id="myObject2"
  data="old_sample.pdf"
  type="application/pdf"
  width="500"
  height="300"
  style="border: 1px solid #ddd;"
>
  <p>Your browser does not support PDFs. <a href="old_sample.pdf">Download it</a> instead.</p>
</object>
<button id="changeButton">Change Data Source</button>

<script>
  const objElement2 = document.getElementById("myObject2");
  const changeButton2 = document.getElementById("changeButton");

  changeButton2.addEventListener("click", () => {
    if (objElement2) {
      objElement2.data = "new_sample.pdf";
    }
  });
</script>

Note: The actual content displayed by <object> tag depends on your browser. The changes are not instantly visible. It is just updating the DOM property, but may require a page refresh or a re-render by the browser to show the actual content. ⚠️

Example 3: Accessing the Embedded Document

If the embedded object contains a document (such as another HTML document or an SVG), you can access it using the contentDocument property.

<object
  id="myObject3"
  data="embed.html"
  type="text/html"
  width="300"
  height="200"
  style="border: 1px solid #ddd;"
></object>

<div id="output3"></div>

<script>
    // Create a simple embed.html file for this example
    // and make sure its in the same directory or give correct path:
   /*
    // embed.html:
        <!DOCTYPE html>
        <html>
        <head>
          <title>Embedded Document</title>
        </head>
         <body>
            <h1 id="embeddedHeading">Hello from embed!</h1>
          </body>
        </html>
    */
  const objElement3 = document.getElementById("myObject3");
  const outputDiv3 = document.getElementById("output3");

  if (objElement3) {
    objElement3.addEventListener("load", () => {
      const embeddedDocument = objElement3.contentDocument;
      if (embeddedDocument) {
        const heading = embeddedDocument.getElementById("embeddedHeading");
         outputDiv3.innerHTML = `Heading in embed: ${heading ? heading.textContent : "Not found"}`;
      }
    });
  }
</script>

Note: Ensure that the embedded document and the host document follow the same origin policy to avoid CORS (Cross-Origin Resource Sharing) issues. 🔑

Advanced Techniques

Responding to Load Events

Use the load event to execute code when the content inside the <object> element has loaded successfully.

<object
    id="myObject4"
    data="example.svg"
    type="image/svg+xml"
    width="200"
    height="200"
    style="border: 1px solid #ddd;"
>
    <p>Your browser does not support SVGs. <a href="example.svg">Download it</a> instead.</p>
</object>

<div id="output4"></div>

<script>
    // Create a simple example.svg file for this example:
    /*
    // example.svg:
        <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
    */
  const objElement4 = document.getElementById("myObject4");
  const outputDiv4 = document.getElementById("output4");

  if(objElement4){
      objElement4.addEventListener("load", () => {
        outputDiv4.textContent = "SVG loaded successfully!";
      });
  }
</script>

Error Handling

Check for the presence of an object element before attempting to manipulate it, and handle any errors gracefully.

<object
 id="myObject5"
  data="nonexistent.pdf"
  type="application/pdf"
  width="500"
  height="300"
  style="border: 1px solid #ddd;"
>
  <p>Your browser does not support PDFs. <a href="nonexistent.pdf">Download it</a> instead.</p>
</object>

<div id="output5"></div>

<script>
  const objElement5 = document.getElementById("myObject5");
  const outputDiv5 = document.getElementById("output5");

  if (objElement5) {
    objElement5.addEventListener('error', () => {
      outputDiv5.innerHTML = "Error loading the object!";
    });
  } else {
      outputDiv5.innerHTML = "Object element not found!";
  }
</script>

Real-World Applications

The HTML <object> element is used in a variety of real-world applications:

• Document Embedding: Displaying PDF documents directly in the browser.
• Multimedia Integration: Embedding videos, audio files, and interactive content.
• Interactive Visualizations: Using SVG or other graphics formats for data visualizations.
• Plugin Integration: Embedding Flash or other plugin-based content (though less common now due to security concerns).

Browser Support

The <object> element is widely supported in modern browsers, making it a reliable choice for embedding external resources. However, always test your implementations to ensure consistent behavior across different browsers.

Note: Browser support is good across all the modern browsers for basic <object> tag, but functionality of embedded object may vary. 🧐

Conclusion

The HTML DOM Object Object provides the ability to access and manipulate <object> elements, allowing you to control embedded content within web pages. By using the methods and properties provided, you can dynamically change the object’s attributes, interact with the embedded document, and respond to load events. This flexibility makes the <object> element a valuable tool for creating dynamic and interactive web experiences.