js中的getElementById的使用方法

富士康质检员张全蛋

已于 2024-08-14 16:57:37 修改

阅读量105

点赞数 1

于 2024-08-14 16:53:41 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/141172449

版权

html css javascript jquery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

在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>

在标签上定义一个ID，然后JS基于这个ID去调用它。

富士康质检员张全蛋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的getElementById的使用方法

在JavaScript中，document.getElementById()是一种用于通过元素的id属性获取DOM元素的方法。它的作用是返回与指定id匹配的HTML元素。使用document.getElementById()可以通过元素的id属性直接获取该元素的引用，在标签上定义一个ID，然后JS基于这个ID去调用它。然后可以使用该引用对元素进行各种操作。(1) 修改元素的内容或属性。(3)获取表单元素的值。(2)添加事件监听器。
复制链接

扫一扫

专栏目录