HTML DOM getElementById()用法及代碼示例

getElementById()方法返回具有給定ID的元素，該元素將傳遞給函數。此函數廣泛用於網頁設計中，以更改任何特定元素的值或獲取特定元素。如果傳遞給函數的ID沒有退出，則返回null。

用法:

document.getElementById( element_ID )

參數：該函數接受單個參數element_ID，該參數用於保存element的ID。

返回值：它返回給定ID的對象。如果不存在具有給定ID的元素，則返回null。

範例1：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            DOM getElementById() Method 
        </title>  
          
        <script>  
          
        // Function to change the color of element 
        function geeks() { 
            var demo = document.getElementById("geeks"); 
            demo.style.color = "green"; 
        }  
        </script>  
    </head>  
      
    <body style = "text-align:center"> 
      
        <h1 id = "geeks">GeeksforGeeks</h1> 
          
        <h2>DOM getElementById() Method</h2> 
          
        <!-- Click on the button to change color -->
        <input type = "button" onclick = "geeks()"
            value = "Click here to change color" /> 
    </body>  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

範例2：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            DOM getElementById() Method 
        </title>  
          
        <script> 
          
            // Function to change content of element 
            function geeks() { 
                var demo = document.getElementById("geeks"); 
                demo.innerHTML = "Welcome to GeeksforGeeks!" ; 
            }  
        </script>  
    </head>  
      
    <body style = "text-align:center"> 
          
        <h1>GeeksforGeeks</h1>  
        <h2>DOM getElementById() Method</h2>  
          
        <h3 id="geeks">Hello Geeks!</h3> 
          
        <!-- Click here to change content -->
        <input type = "button" onclick = "geeks()"
            value="Click here to change content" />  
    </body>  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

支持的瀏覽器：下麵列出了DOM getElementById()方法支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
火狐瀏覽器
Opera
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自ankit15697大神的英文原創作品 HTML | DOM getElementById() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。