HTML DOM id用法及代码示例

DOM id属性用于设置或返回元素的id，即Id属性的值。文件中的ID应该不同。通过使用document.getElementById()方法返回它。

用法

HTMLElementObject.id

返回值：此语法用于返回id属性。

HTMLElementObject.id = id

属性：它包含ID属性的值，并用于返回ID属性。

示例1：获取第一个元素的ID。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM id Property 
    </title> 
    <style> 
        .GEEKS { 
            display:block; 
            padding:5px; 
            background-color:green; 
            color:white; 
        } 
          
        #GFG { 
            background-color:tomato; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green; 
               font-weight:bold; 
               text-align:center;"> 
     GeeksForGeeks 
    </h1> 
  
    <h2 style="color:green; 
               font-weight:bold; 
               text-align:center"> 
     DOM ID Property 
    </h2> 
  
    <a class="GEEKS" id="GFG" href="#"> 
      C programming 
    </a> 
    <a class="GEEKS" href=" # "> 
      java 
    </a> 
    <a class="GEEKS " href="# "> 
      Ruby 
    </a> 
  
    <button onclick="GEEKS() "> 
      Submit 
    </button> 
  
    <p id="SUDO "></p> 
  
    <script> 
        function GEEKS() { 
            var x = 
                document.getElementsByClassName("GEEKS ")[0].id; 
            document.getElementById("SUDO ").innerHTML = x; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

示例2：更改特定ID的值。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM id Property 
    </title> 
  
</head> 
  
<body> 
    <center> 
        <h1 style="color:green; 
                   font-weight:bold; 
                   text-align:center;"> 
         GeeksForGeeks 
        </h1> 
  
        <h2 style="color:green; 
                   font-weight:bold; 
                   text-align:center"> 
         DOM ID Property 
        </h2> 
  
        <p> 
          <a id="geeks" href="#">GeeksforGeeks</a> 
        </p> 
  
        <button onclick="geeks()">Submit</button> 
  
        <p id="gfg"></p> 
  
        <script> 
            function geeks() { 
                document.getElementById("geeks").id = "sudo"; 
                document.getElementById("gfg").innerHTML = 
                    "The value of the ID attribute" +  
                    "changed from geeks to sudo"; 
            } 
        </script> 
    </center> 
  
</body> 
  
</html>

输出：

支持的浏览器：DOM ID属性支持的浏览器如下：

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

相关用法

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