JavaScript getElementById
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 `document.getElementById` 方法。此方法对于 DOM 操作至关重要，它允许开发人员通过其唯一的 ID 属性访问特定元素。
基本定义
`document.getElementById` 方法返回具有指定 ID 属性的元素。这是使用 JavaScript 处理 DOM 最常用和最重要的几种方法之一。
元素 ID 在页面中应该是唯一的。如果多个元素共享相同的 ID，`getElementById` 将返回它遇到的第一个具有该 ID 的元素。
基本的 getElementById
此示例演示了如何通过 ID 访问简单的 div 元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic getElementById</title>
</head>
<body>
<div id="content">Hello there!</div>
<script>
const element = document.getElementById('content');
console.log(element.textContent);
</script>
</body>
</html>
在这个基本示例中，我们有一个 ID 为“content”的 div 元素。JavaScript 代码使用 `getElementById` 获取此元素，并将其文本内容记录到控制台。
这演示了 `getElementById` 访问和处理 DOM 元素的根本用法。该方法返回元素对象，然后我们可以以各种方式对其进行操作。
更改元素内容
此示例展示了如何使用 getElementById 修改元素的内容。
<!DOCTYPE html>
<html>
<head>
<title>Changing Content</title>
</head>
<body>
<h1 id="heading">Original Heading</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
const heading = document.getElementById('heading');
heading.textContent = 'New Heading Text!';
}
</script>
</body>
</html>
这里我们有一个标题元素和一个按钮。当按钮被点击时，会调用 `changeText` 函数，该函数使用 `getElementById` 查找标题并更改其文本内容。
这演示了如何在事件处理程序中使用 `getElementById` 动态修改页面内容。`textContent` 属性用于安全地设置文本，避免了使用 `innerHTML` 可能出现的潜在 XSS 漏洞。
更改元素样式
此示例演示了如何使用 getElementById 更改元素的样式。
<!DOCTYPE html>
<html>
<head>
<title>Changing Style</title>
<style>
#colorBox {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="colorBox"></div>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
const box = document.getElementById('colorBox');
box.style.backgroundColor = 'red';
box.style.borderRadius = '50%';
}
</script>
</body>
</html>
在此示例中，我们有一个彩色框和一个按钮。当按钮被点击时，`changeColor` 函数使用 `getElementById` 访问该框并修改其样式属性。
这表明 `getElementById` 可用于动态更改元素的 CSS 属性。`style` 属性提供了对元素所有 CSS 属性的访问，从而可以实现丰富的视觉更改。
表单输入处理
此示例演示了如何使用 getElementById 从表单输入中获取值。
<!DOCTYPE html>
<html>
<head>
<title>Form Handling</title>
</head>
<body>
<input type="text" id="username" placeholder="Enter your name">
<button onclick="greetUser()">Greet</button>
<p id="greeting"></p>
<script>
function greetUser() {
const nameInput = document.getElementById('username');
const greetingElement = document.getElementById('greeting');
greetingElement.textContent = `Hello, ${nameInput.value}!`;
}
</script>
</body>
</html>
这里我们有一个文本输入字段和一个按钮。当按钮被点击时，`greetUser` 函数使用 `getElementById` 获取输入值并显示问候消息。
这演示了 `getElementById` 在表单处理中的常见用例。输入元素的 `value` 属性包含当前用户输入，可以根据需要进行访问和处理。
事件监听器注册
此示例展示了如何使用 getElementById 注册事件监听器。
<!DOCTYPE html>
<html>
<head>
<title>Event Listeners</title>
</head>
<body>
<button id="myButton">Click Me</button>
<p id="message"></p>
<script>
const button = document.getElementById('myButton');
const message = document.getElementById('message');
button.addEventListener('click', function() {
message.textContent = 'Button was clicked!';
});
</script>
</body>
</html>
在此示例中，我们使用 `getElementById` 获取对按钮和段落元素的引用。然后，我们在按钮上注册一个点击事件监听器，该监听器会在按钮被点击时更新段落文本。
这表明 `getElementById` 通常用于获取事件监听器注册的元素引用。`addEventListener` 方法提供了一种处理用户交互的灵活方式。
来源
在本文中，我们展示了如何在 JavaScript 中使用 `document.getElementById`。此方法对于 Web 开发中的 DOM 操作和元素选择至关重要。
作者
列出 所有 JS DOM 教程。