HTML | DOM Object Object

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 complied 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <center>
        <object id="myobject"
                width="400" 
        </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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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", 
                
                x.setAttribute("width", "400");
                x.setAttribute("height", "100");
                document.body.appendChild(x);
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.