如何通过 id 获取元素 - JavaScript

在 JavaScript 中，要获取 HTML 页面上的元素，可以使用 DOM (Document Object Model) API。其中一个常见的需求是通过 id 获取元素。

原理

在 HTML 中，可以为元素设置一个唯一的 id 属性。这个属性的值可以使用 letters、digits、underscores、hyphens、和 periods，但是必须以字母开头。

在 JavaScript 中，我们可以使用 document.getElementById() 方法来获取 HTML 页面上的元素。该方法将返回与所提供 id 属性值匹配的第一个元素，如果找不到相应的元素，则返回 null。

示例

以下是通过 id 获取元素的示例代码：

// 获取 id 为 my-element 的元素
const myElement = document.getElementById('my-element');

// 操作该元素
myElement.style.color = 'red';
myElement.innerHTML = 'Hello, world!';

在上述示例中，我们首先使用 document.getElementById() 方法获取了一个 id 为 my-element 的元素，并将其存储在 myElement 变量中。然后，我们可以对该元素进行各种操作，例如修改其 CSS 样式、修改其文本内容等。

注意事项

需要注意一下几个事项：

• 如果存在多个具有相同 id 属性值的元素，document.getElementById() 方法将只返回第一个元素。
• 需要确保所提供的 id 属性值正确且唯一，否则可能会导致错误。
• 如果无法找到与所提供 id 属性值匹配的元素，document.getElementById() 方法将返回 null。

总结

通过 id 获取元素是 JavaScript 中的一项基础操作。我们可以使用 document.getElementById() 方法来实现这一目的。希望本文能对你有所帮助！