JavaScript-document.getElementById()方法(1)

📌 相关文章

📜 JavaScript-document.getElementById()方法(1)

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

JavaScript-document.getElementById()方法

document.getElementById() 是 JavaScript 中一种常用的 DOM 操作方法，用于获取指定 id 的页面元素对象。通过该方法可以轻松地获取页面中的 HTML 元素，并在代码中对其进行操作。

语法

element = document.getElementById(id);

其中，id 是一个字符串值，表示要获取的 HTML 元素的 id 属性值。返回值是一个类型为 object 的对象，表示页面中具有相应 id 值的元素。

示例

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript-document.getElementById()方法示例</title>
  </head>
  <body>
    <h1 id="myTitle">这是一个标题</h1>
    <p id="myParagraph">这是一个段落</p>
    <script>
      // 获取标题元素对象
      var title = document.getElementById("myTitle");
      // 修改标题文本内容
      title.innerHTML = "修改后的标题";
      // 获取段落元素对象
      var p = document.getElementById("myParagraph");
      // 修改段落样式
      p.style.color = "red";
    </script>
  </body>
</html>

在上面的示例中，我们通过 document.getElementById() 方法获取了 id 分别为 myTitle 和 myParagraph 的 HTML 元素对象，并进行了操作。其中，我们修改了标题元素的文本内容和段落元素的样式。

注意事项

只有具有 id 属性的 HTML 元素才能通过 document.getElementById() 方法来获取。
如果在页面中存在多个具有相同 id 值的元素，那么只会返回第一个匹配的元素对象。
在通过 getElementById 获取 DOM 元素后，需要注意该元素是否存在，以免出现找不到元素对象的错误。