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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。