HTML DOM HTML用法及代码示例

HTML DOM中的HTML Object属性用于表示或访问该对象中的HTML <html>元素。 <html>元素用于将HTML文档作为元素对象返回。

用法:

它用于访问<html>元素。

var x = document.getElementsByTagName("HTML")[0];

它还可以用于访问<html>元素。
```
var x = document.documentElement;
```

属性值：

getElementsByTagName()：它用于返回具有指定标签名称的所有子元素的集合。
innerHTML:它用于设置或返回元素的内容。
getElementsById()：它用于返回具有指定ID的所有子元素的集合。

示例1：使用document.getElementsByTagName(“HTML”)[0];访问HTML元素。

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

输出：

在单击按钮之前：

单击按钮后：

示例-2：访问html元素，返回元素是第一或第二。

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

输出：

在单击按钮之前：

单击按钮后：

示例3：访问html元素并返回所有具有指定标签名称的子级。

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

输出：

在单击按钮之前：

单击按钮后：

支持的浏览器：下面列出了DOM HTML Object属性支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 HTML | DOM HTML Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。