資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究JavaScript 中的“getElementByID”是如何工作的？
本文討論了 JavaScript 中“getElementByID”方法的工作原理。JavaScript 中的getElementByID() 方法是一個文件方法。當我們提供一個與 HTML 元素 ID 匹配的特定字串時，它將返回元素物件。每個 HTML 元素都可以分配一個唯一的 ID。如果兩個或多個元素具有相同的 ID，則getElementByID() 方法返回第一個元素。getElementByID() 方法用於更快地訪問元素。它幫助我們在文件中操作 HTML 元素，並受所有現代瀏覽器支援。如果元素不存在，則getElementById()函式返回 null。在這種情況下，我們可以使用document.querySelector()，它不需要任何 ID。
語法
getElementByID()方法的語法如下：
document.getElementByID(id);
其中，id是要返回的元素 ID。它區分大小寫。返回一個元素物件。
示例 1
這是一個定義document.getElementById()方法用法的示例程式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A program on how getElementById works in JavaScript</title>
</head>
<body style="text-align: center ;">
<p> A program to define the usage of document.getElementById </p>
<p id="desc-docID">One of the most common methods in the HTML DOM is getElementById(). When you want to read or change an HTML element, you use document.getElementById().</p>
<p id="document-id" style="text-align : center"></p>
<script>
let content = document.getElementById('desc-docID').innerHTML;
document.getElementById('document-id').innerHTML = "The content inside the paragraph with id 'desc-docID' is : "+content;
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 2
這是一個使用document.getElementByID()方法讀取或更改 HTML 元素的示例程式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A program on how getElementById works in JavaScript</title>
</head>
<body style="text-align: center ;">
<p> A program to define the usage of document.getElementById </p>
<p id="desc-docID">One of the most common methods in the HTML DOM is getElementById(). When you want to read or change an HTML element, you use document.getElementById().</p>
<p id="document-id" style="text-align : center"></p>
<script>
document.getElementById('desc-docID').style.color = "blue";
document.getElementById('desc-docID').style.fontStyle = "oblique";
document.getElementById('desc-docID').style.fontSize = "large";
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 3
這是一個指向不存在的 ID 並使用document.getElementByID()方法返回 NULL 的示例程式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A program on how getElementById works in JavaScript</title>
</head>
<body style="text-align: center ;">
<p> A program to define the usage of document.getElementById </p>
<p id="sample"></p>
<script>
let content = document.getElementById('demo'); // Pointing to a non-existing ID name returns NULL.
document.getElementById('sample').innerHTML = 'The content inside the id="demo" is : '+ content;
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
更新於：2024年11月12日
7K+ 次瀏覽
廣告