Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM HTML Object

  • Difficulty Level : Basic
  • Last Updated : 07 Feb, 2019

The HTML Object property in HTML DOM is used to represent or access the HTML <html> element with in the object. The <html> element is used to return the HTML document as an Element Object.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • It is used to access a <html> element.
    var x = document.getElementsByTagName("HTML")[0];
  • It can also be used to access a <html> element.
    var x = document.documentElement;

Property Values:

  • getElementsByTagName(): It is used to return a collection of all child elements with the specified tag name.
  • innerHTML: It is used to set or return the content of an element.
  • getElementsById(): It is used to return a collection of all child elements with the specified Id.

Example-1: Access HTML element using document.getElementsByTagName(“HTML”)[0];






<!DOCTYPE html>
<html>
<title>
    HTML | DOM HTML Object Property
</title>
<style>
    body {
        text-align: center;
        width: 70%;
    }
      
    h1 {
        color: green;
    }
      
    h1,
    h2 {
        text-align: center;
    }
</style>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2> HTML Object</h2>
  
    <p>Click the button to get the 
      HTML content of the html element.</p>
  
    <button onclick="GFG()">Click</button>
  
    <p id="Geeks"></p>
  
    <script>
        function GFG() {
              
          // Access html element and 
          return using "innerHTML"
          var x = 
          document.getElementsByTagName(
            "HTML")[0].innerHTML;
          document.getElementById("Geeks").innerHTML = x;
      }
    </script>
</body>
  
</html>

Output:

Before Click On the Button:

After Click On the Button:

Example-2: Access html element and return element is first or second.




<!DOCTYPE html>
<html>
<title>
    HTML | DOM HTML Object Property
</title>
<style>
    body {
        text-align: center;
        width: 70%;
    }
      
    h1 {
        color: green;
    }
      
    h1,
    h2 {
        text-align: center;
    }
</style>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2> HTML Object</h2>
  
    <p>Click the button to get the 
      HTML content of the html element.</p>
    <p>Using the document.documentElement</p>
    <button onclick="GFG()">Click</button>
  
    <p id="Geeks"></p>
  
    <script>
        function GFG() {
            // Access html element and return html 
           // with position value of html element.
            var x = 
            document.documentElement.innerHTML;
            document.getElementById(
              "Geeks").innerHTML = "first" + x;
            
            var y = 
            document.documentElement.innerHTML;
            document.getElementById(
              "Geeks").innerHTML = y + "second";
        }
    </script>
</body>
  
</html>

Output:

Before Click On the Button:

After Click On the Button:

Example-3: Access html element and return all child with specified tag name.




<!DOCTYPE html>
<html>
<title>
    HTML | DOM HTML Object Property
</title>
<style>
    body {
        text-align: center;
        width: 70%;
    }
      
    h1 {
        color: green;
    }
      
    h1,
    h2 {
        text-align: center;
    }
</style>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2> HTML Object</h2>
  
    <p>Click the button to get the
      HTML content of the html element.</p>
    <p>Using the getElementsByTagName("HTML")[0] 
      and documentElement</p>
    <button onclick="GFG()">Click</button>
  
    <p id="Geeks"></p>
  
    <script>
        function GFG() {
            // access and return html element
            var x = 
              document.getElementsByTagName(
                "HTML")[0].innerHTML;
            document.getElementById("Geeks").innerHTML =
              "getElementsByTagName" + x;
            var y = 
             document.documentElement.innerHTML;
            document.getElementById("Geeks").innerHTML =
              y + "documentElement";
        }
    </script>
</body>
  
</html>

Output:

Before Click On the Button:

After Click On the Button:

Supported Browsers: The browser supported by DOM HTML Object property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!