"getElementByID"在 JavaScript 中的工作原理是什么?
javascriptweb developmentfront end technology
本文讨论了"getElementByID"方法在 JavaScript 中的工作原理。JavaScript 中的 getElementByID() 方法 是一种文档方法。当我们给出一个应与 HTML 元素的 ID 匹配的特定字符串时，它会返回元素对象。每个 HTML 元素都可以分配一个唯一的 ID。如果两个或多个元素具有相同的 ID，则 getElementByID() 方法 将返回第一个元素。getElementByID() 方法 用于更快地访问元素。它帮助我们操作文档中的 HTML 元素，并且所有现代浏览器都支持它。如果元素不存在，则 getElementById() 函数返回 null。在这种情况下，我们可以使用不需要任何 ID 的 document.querySelector()。
语法
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
这是一个使用 document.getElementByID() 方法指向不存在的 ID 并返回 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>
执行上述代码后，将生成以下输出。
