HTML | DOM Object Object

Last Updated : 31 Aug, 2021

The Object object represents only HTML <object> element. We can access any <object> element by using the getElementById(); and also can create object element by using createElement(); method.
Syntax:

It is used to access Object element

document.getElementById("id");

It is used to create object element

document.createElement("object");

Property Values:

Property	Description
align	It is used to set or return the alignment of the object
archive	It is used to set or return a string which is useful in implementation of archive function
border	It is used to set or returnsthe border around object
code	It is used to set or return the src url of files of compiled java classes.
codeBase	It is used to set or return URL of components
data	It is used to set or return the URL of the resource
form	It is used to return parent form’s reference
height	It is used to set or return object’s height
hspace	Set or return horizontal margin
name	Set or return object’s name
standby	It is used to sets or return message while object loading
type	It is used to sets or return the content type for data downloaded
useMap	It is used to sets or returns the name of a image map of client-side
vspace	Sets or return vertical margin
width	It is used to sets or return width of object

Example-1: Access object element and return the URL of the resource

html

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <object id="myobject"
                width="400"
data="https://media.geeksforgeeks.org/wp-content/uploads/geek-8.png">
        </object>
 
         
<p>Click the button to get
          the URL of the embedded file.</p>
 
 
        <button onclick="Geeks()">
          Click it
        </button>
 
        <p id="gfg"></p>
 
    </center>
    <script>
        function Geeks() {
           
            // Accessing Object element.
            var x =
                document.getElementById(
                  "myobject").data;
           
            document.getElementById(
              "gfg").innerHTML = x;
        }
    </script>
 
</body>
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Example-2: Create object element using document.createElement.

html

<!DOCTYPE html>
<html>
 
<body>
    <center>
 
         
<p>Click the button to create an
          Object element with an embedded file.</p>
 
 
        <button onclick="Geeks()">
          Click it
        </button>
 
        <p id="gfg"></p>
 
 
        <script>
            function Geeks() {
               
                // Creating object element.
                var x =
                    document.createElement(
                      "OBJECT");
               
                // Set data of the OBJECT.
                x.setAttribute("data",
"https://media.geeksforgeeks.org/wp-content/uploads/geek-8.png");
               
                x.setAttribute("width", "400");
                x.setAttribute("height", "100");
                document.body.appendChild(x);
            }
        </script>
    </center>
</body>
 
</html>