当前位置: 首页>>代码示例>>用法及示例精选>>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。