HTML - DOM getElementById() 方法

HTML DOM 的getElementById() 方法用於透過傳遞其 ID 作為引數來檢索元素。在HTML中，ID是一個屬性，用於為元素指定唯一的識別符號（例如，<p id="demo">），其中“demo”是<p>元素的 ID 值。

如果 ID 不唯一，則只返回具有該 ID 的第一個元素。如果指定的 ID 不存在，則此方法將返回 null。

在討論此方法的各種示例之前，讓我們考慮一個互動式部分，這將使您更清楚地瞭解此方法的各種場景。

DOM getElementById() 方法 - 技術教學

歡迎來到 Tutorialspoint

嘿！這是一個 HTML 段落

語法

以下是 HTML DOM getElementById() 方法的語法：

document.getElementById(ElementId);

引數

此方法接受如下所示的單個引數：

引數	描述
ElementId	它表示要查詢的元素的 ID 值。它是一個區分大小寫的字串。

返回值

如果存在給定 ID 的元素，則此方法返回該元素；如果不存在具有指定 ID 名稱的 ID，則返回 null。

示例 1

以下是 HTML DOM getElementById() 方法的基本示例：

<html>
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p id="demo">Tutorialspoint</p>
<script>
   alert(document.getElementById('demo'));
</script>
</body>
</html>

將出現一個彈出警報，顯示訊息“[object HTMLParagraphElement]”。

示例 2：更改字型顏色

我們將使用 HTML DOM getElementById() 方法首先按其“id”訪問元素，然後使用“style”屬性更改字型顏色：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to change color.</p>
<button onclick="fun()">Click me</button>
<p id="tp">"Welcome to Tutorials Point.."</p>
<script>
   function fun() {
      let x = document.getElementById("tp");
      x.style.color = "red";
   }
</script>
</body>
</html>

執行上述程式後，將顯示一個按鈕。單擊時，字型顏色將變為“綠色”。

示例 3：顯示任何文字

在下面的示例中，我們將文字顯示到<p> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below to display a text</p>
<button onclick="fun()">Click me</button>
<p id="tp"></p>
<script>
   function fun() {
      document.getElementById("tp").innerHTML = "Welcome to Tutorials Point";
   }
</script>
</body>
</html>

執行上述程式後，將出現一個按鈕，單擊後將顯示文字“歡迎來到 Tutorials Point”。

示例 4：更改字型大小

在下面的示例中，單擊按鈕後將更改顯示文字的字型大小：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to change the font size.</p>
<button onclick="fun()">Click me</button>
<p id="tp">"Welcome to Tutorials Point.."</p>
<script>
   function fun() {
      let x = document.getElementById("tp");
      x.style.fontSize = "24px";
   }
</script>
</body>
</html>

執行上述程式後，視窗螢幕上將出現一個按鈕，單擊後字型大小將更改為“24px”。

示例 5：新增事件監聽器

在下面的示例中，我們將使用其 ID 訪問按鈕元素，然後使用addEvenetListener() 方法新增單擊事件，該方法會觸發警報訊息：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementById() Method</title>
</head>
<body>
<p>Click on the below button to alert a message </p>
<button id="tp">click me</button>
<script>
   document.getElementById("tp").addEventListener("click", fun);
   function fun() {
      alert("Welcome to Tutorialspoint");
   }
</script>
</body>
</html>

執行上述程式後，將顯示一個按鈕，單擊後，視窗螢幕上將出現警報訊息“歡迎來到 Tutorialspoint”。

支援的瀏覽器

方法
getElementByID	是 1	是 12	是 1	是 1	是 7

html_dom_document_reference.htm

列印頁面