JavaScript getElementById

JavaScript getElementById() 方法简介

document.getElementById()方法返回一个Element对象,该对象表示具有与指定字符串匹配的 id 的 HTML 元素。

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

由于元素的 id 在 HTML 文档中是唯一的,因此这document.getElementById()是访问元素的快速方法。

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

该方法的语法如下所示getElementById()

const element = document.getElementById(id);

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

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

JavaScript getElementById() 方法示例

假设您有以下 HTML 文档:

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

该文档包含一个具有值为 的属性的<p>元素:idmessage

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

输出

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

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

  • 如果未找到匹配元素,则返回document.getElementById()id或指定的 DOM 元素null
  • 如果多个元素具有相同的id,即使它无效,也会getElementById()返回它遇到的第一个元素。

Leave a Reply

您的邮箱地址不会被公开。 必填项已用 * 标注