您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JavaScript getElementById 查找元素

时间:06-10来源:作者:点击数:

在本教程中,您将学习如何使用 JavaScript 的 DOM API 的 getElementById 方法通过指定 id 选择元素。

JavaScript getElementById 方法简介

document.getElementById 方法返回一个 Element 对象,该对象是具有与指定 id 属性的 HTML 元素。

如果 HTML 文档没有包含指定 id 的元素,则 document.getElementById() 返回null

由于元素的 id 在 HTML 文档中是唯一的,因此 document.getElementById() 是获取元素的最快方法。

与 querySelector() 方法不同的是,getElementById() 只能在 document 对象使用,而不能在其他元素上使用。

getElementById() 语法如下所示:

const element = document.getElementById(id);

在此语法中,id 是一个字符串,表示要选择的元素的 id。ID 区分大小写。例如,'root' 和 'Root' 是不相同的。

在 HTML 文档中 id 是唯一的。然而,HTML 是一种宽松的语言。如果 HTML 文档具有多个相同 id 的元素,则 document.getElementById() 方法返回 HTML 文档的第一个元素。

JavaScript getElementById 方法示例

假设您有以下 HTML 文档:

<html>
    <head>
        <title>JavaScript getElementById() Method</title>
    </head>
    <body>
        <p id="message">A paragraph</p>
    </body>
</html>

该文档包含一个id 属性,值为 message 的 <p> 元素:

const p = document.getElementById('message');
console.log(p);

输出:

<p id="message">A paragraph</p>

选择元素后,您可以为元素添加样式、操作其属性以及遍历父元素和子元素。

结论

document.getElementById()  通过指定的 id 查找 DOM 元素,如果未找到匹配的元素,则返回 null。如果多个元素具有相同的 idgetElementById() 也会返回它遇到的第一个元素。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门