数据结构
网络
关系数据库管理系统 (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+ 次浏览
广告