HTML 之 Dom应用

2024-12-30 技术教程

理解

1、找到标签获取单个元素 document.getElementById(‘i1’) 获取多个元素（列表） document.getElementsByTagName(“div”) 获取多个元素（列表） document.getElementsByClassName(‘c1’) a.直接找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2、操作标签 innerText 获取标签中的文本内容标签.innertText 标签赋值标签.innertText = “” className tag.className => 直接整体操作 tag.classList.add(‘样式名’) 添加指定样式 tag.classList.remove(‘样式名’) 删除指定样式代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: #6e6568; position: fixed; top: 0; left:0; right: 0; bottom: 0; z-index: 9; } .c2{ background-color: #e6e6e6; position: fixed; height: 300px; width: 300px; left:35%; top:23%; z-index: 10; opacity: 0.7; } .hide{ display: none; } </style></head><body > <input type="button" onclick="ShowModule()" value="测试">  <div id="i1" class="c1 hide"></div>  <div id="i2" class="c2 hide"> <div><span>用户名：</span><input type="text" id="user"/></div> <div><span>密码：</span><input type="password" id="password"/></div> <div > <input type="button" value="确定" onclick="ShowMsg()"/> <input type="button" value="取消" onclick="addhide()"/> </div> </div>  <script> function ShowModule() { document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function addhide() { document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ShowMsg() { var name = document.getElementById("user").value; alert(name); } </script></body></html>展示