HTML | DOM getElementById() 方法(1)

📌 相关文章

📜 HTML | DOM getElementById() 方法(1)

📅 最后修改于: 2023-12-03 15:01:11.728000 🧑 作者: Mango

HTML | DOM getElementById() 方法

在HTML文档中，每个元素都有一个唯一的ID，这使得我们可以使用JavaScript中的getElementById()方法来访问指定的元素。

getElementById()方法是HTML文档对象模型(DOM)中最常用的方法之一，它接收一个参数，即要获取的元素的ID，并返回该元素的引用。

语法

document.getElementById(elementId)

elementId: 要获取引用的元素ID。

返回值

返回值是一个DOM元素对象，如果未找到与指定ID匹配的元素，则返回null。

实例

下面是一个简单的例子，用于演示如何使用getElementById()方法。

<!DOCTYPE html>
<html>
  <head>
    <title>使用getElementById()方法</title>
  </head>
  <body>
    <div id="myDiv">Hello World!</div>
    <script>
      var element = document.getElementById("myDiv");
      console.log(element);
    </script>
  </body>
</html>

运行以上代码，将会在控制台中得到以下输出：

<div id="myDiv">Hello World!</div>

这是因为我们使用getElementById()方法获取了一个ID为myDiv的元素，并将其赋值给了element变量。由于这个变量指向的是DOM元素对象，因此在控制台中显示DOM元素对象的HTML代码。

总结

使用getElementById()方法可以在JavaScript中获取页面上的元素，这是处理DOM表示法中最基本的步骤之一。除此之外，该方法还提供了一些其他的方法可以使用，例如，可以使用innerHTML属性来设置或获取指定元素的HTML。