js中的getElementById的使用方法

news2024/9/21 3:34:22

在JavaScript中，document.getElementById()是一种用于通过元素的id属性获取DOM元素的方法。它的作用是返回与指定id匹配的HTML元素。

使用document.getElementById()可以通过元素的id属性直接获取该元素的引用，然后可以使用该引用对元素进行各种操作。例如：

(1) 修改元素的内容或属性

var element = document.getElementById("myElement");
element.innerHTML = "Hello, World!"; // 修改元素的内容
element.style.color = "red"; // 修改元素的样式

(2)添加事件监听器

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

(3)获取表单元素的值

var input = document.getElementById("myInput");
var value = input.value;
console.log(value); // 输出输入框的值


<!DOCTYPE html>
<html>
<head>
      <style>

      </style>
</head>

<body>
        <button id="btn1" type="button" value="button1">点击我</button>

        <p id="msg"></p>

        <script>
           var btn1 = document.getElementById('btn1')
           var msg = document.getElementById('msg')
           var btn1Value = btn1.value 


           btn1.onclick = function(){
             alert(btn1Value)
             msg.innerHTML = "hello lucas"
             msg.style.color = "red"
           }
        </script>

</body>

</html>