当我们需要获取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>
- 页面中有一个按钮，当按钮被单击时，会显示一个对话框。
- 对话框元素被隐藏在一个
<div>中，使用CSS设置其样式display: none，使其最初处于隐藏状态。 - 在脚本中，使用
document.getElementById获取对话框元素，并通过操作CSS类来显示或隐藏元素。
注意事项
- 使用
document.getElementById获取元素时，id属性值必须与页面中元素的id属性值完全匹配，包括大小写。 - 如果id值不存在，
document.getElementById方法将返回null。 - 由于IE9及更早的版本不支持
classList，因此如果需要兼容旧版浏览器，可以考虑使用className属性来操作CSS类。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：document.getElementById介绍 - Python技术站
微信扫一扫 
支付宝扫一扫 