document.getElementById介绍

2023年6月10日下午2:56 • JavaScript

当我们需要获取HTML页面中的元素并且对其进行操作时，就需要用到document.getElementById方法。这个方法可以通过指定元素的id属性值，从HTML文档中获取对应的元素节点对象，并返回该节点对象。接下来我会详细讲解document.getElementById的用法和注意事项。

语法

document.getElementById()的语法如下：

document.getElementById(元素的id属性值);

该方法通过传入需要获取元素的id属性值来获取相应的元素，并将其返回。

实例1: 获取文本框元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>document.getElementById示例1</title>
</head>
<body>
  <input type="text" id="myInput">
  <button onclick="showInputValue()">获取<input>的值</button>
  <script>
    function showInputValue() {
      var input = document.getElementById("myInput");
      alert(input.value);
    }
  </script>
</body>
</html>

首先，要在页面中添加一个文本框元素和一个按钮，当按钮被单击时，将文本框的值输出。
在脚本部分，我们使用document.getElementById方法获取指定id属性值的元素节点。
通过获取的元素节点，我们可以轻松地访问其值和属性。

实例2: 获取对话框元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>document.getElementById示例2</title>
</head>
<body>
  <button onclick="showPopup()">显示对话框</button>
  <script>
    function showPopup() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");
    }
  </script>
  <style>
    .popup {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid black;
      padding: 10px;
    }
    .show {
      display: block;
    }
  </style>
  <div id="myPopup" class="popup">
    <h1>这是一个对话框</h1>
    <p>这是一段文本</p>
    <button onclick="showPopup()">关闭对话框</button>
  </div>
</body>
</html>