HTML | DOM HTML Object

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:

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> 