在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去调用它。