1.直接查找元素
document.getElementById #根据ID获取一个标签 document.getElementsByName #根据name属性获取标签集合 document.getElementsByClassName #根据class属性获取标签集合 document.getElementsByTagName #根据标签名获取标签集合2.间接查找元素
parentElement # 父节点标签元素 children # 所有子标签 firstElementChild # 第一个子标签元素 lastElementChild # 最后一个子标签元素 nextElementtSibling # 下一个兄弟标签元素 previousElementSibling # 上一个兄弟标签元素3.操作DOM
3.1 innerText修改标签页面上的内容
<div id="d1">d1</div> <script> var tag=document.getElementById('d1'); var content=tag.innerText; console.log(content); </script> 3.2className修改标签的class样式
<div id="d1" class="c1">d1</div> <script> var tag=document.getElementById('d1'); var content=tag.className; tag.className='c2' console.log(tag.className); </script>3.3classList修改标签的class样式
<div id="d1" class="c1">d1</div> <script> var tag=document.getElementById('d1'); var content=tag.classList; //class增加一个c2 content.add('c2'); console.log(content); //class减掉一个c1 content.remove('c1'); console.log(content); </script>4.选择菜单
主界面
弹出框
<style> .hide{ display: none; } .c1{ position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: black; opacity: 0.6; z-index: 9; } .c2{ position: fixed; width: 500px; height: 300px; background-color:white ; z-index: 10; left: 50%; top: 50%; margin-left: -250px; margin-top: -300px; } </style> </head> <body> <!--页面内容开始--> <div class="t_body"> <input type="button" value="添加" onclick="show_model()"/> <input type="button" value="全选" onclick="choose_all()"/> <input type="button" value="取消" onclick="cancle_all()"/> <input type="button" value="反选" onclick="reverse_all()"/> <table> <thead> <tr> <th>选择</th><th>姓名</th><th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>mxm</td> <td>123</td> </tr> <tr> <td><input type="checkbox"></td> <td>ytm</td> <td>123</td> </tr> <tr> <td><input type="checkbox"></td> <td>wwqe</td> <td>123</td> </tr> </tbody> </table> </div> <!--页面内容结束--> <!--遮罩开始--> <div id="i1" class="c1 hide"></div> <!--遮罩结束--> <!--弹出框开始--> <div id="i2" class="c2 hide"> <p>添加人员</p> <p><span>用户名：</span><input type="text" /></p> <p><span>密码：</span><input type="text" /></p> <p><span>确认密码：</span><input type="text" /></p> <p><input type="button" value="取消" onclick="hide_model()"><input type="button" value="确认"></p> </div> <!--弹出框结束--> <script> //显示弹出框 function show_model() { document.getElementById("i1").classList.remove("hide"); document.getElementById("i2").classList.remove("hide"); } //隐藏弹出框 function hide_model() { document.getElementById("i1").classList.add("hide"); document.getElementById("i2").classList.add("hide"); } //全选 function choose_all() { //获取tbody标签 var tbody=document.getElementById("tb"); //获取tbody下的所有tr var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ //便利tbody下的所有tr var current_tr=tr_list[i]; //取得tr下的td标签下的input标签 var checkbox=current_tr.children[0].children[0]; //设置选中checked为真 checkbox.checked=true; } } //取消 function cancle_all() { //获取tbody标签 var tbody=document.getElementById("tb"); //获取tbody下的所有tr var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ //便利tbody下的所有tr var current_tr=tr_list[i]; //取得tr下的td标签下的input标签 var checkbox=current_tr.children[0].children[0]; //设置选中checked为假 checkbox.checked=false; } } //反选 function reverse_all() { //获取tbody标签 var tbody=document.getElementById("tb"); //获取tbody下的所有tr var tr_list=tbody.children; for(var i=0;i<tr_list.length;i++){ //便利tbody下的所有tr var current_tr=tr_list[i]; //取得tr下的td标签下的input标签 var checkbox=current_tr.children[0].children[0]; //设置选中checked为假 if(checkbox.checked){ checkbox.checked=false; }else { checkbox.checked=true; } } } </script>5.左侧菜单栏
<head> <style> .hide{ display: none; } .title{ background-color:#ff6600; width: 120px; height: 35px; line-height: 35px; } </style> </head> <body> <div class="11"> <div class="c"> <div id="i1" class="title" onclick="change('i1');">菜单1</div> <div class="content"> <div>子菜单</div> <div>子菜单</div> <div>子菜单</div> </div> </div> <div class="c"> <div id="i2" class="title" onclick="change('i2');">菜单2</div> <div class="content hide"> <div>子菜单</div> <div>子菜单</div> <div>子菜单</div> </div> </div> <div class="c"> <div id="i3" class="title" onclick="change('i3');">菜单3</div> <div class="content hide"> <div>子菜单</div> <div>子菜单</div> <div>子菜单</div> </div> </div> <div class="c"> <div id="i4" class="title" onclick="change('i4');">菜单4</div> <div class="content hide"> <div>子菜单</div> <div>子菜单</div> <div>子菜单</div> </div> </div> </div> <script> function change(pid) { //取得当前点击的元素标签 var title=document.getElementById(pid); //取得所有上级的上级的子标签<div class="c"> var list_c=title.parentElement.parentElement.children; //取得<div class="content hide"> for(var i=0;i<list_c.length;i++){ var current_item=list_c[i]; //设置所有list_hide的class添加hide current_item.children[1].classList.add('hide'); } //设置点击元素的同级div去掉hide样式 title.nextElementSibling.classList.remove('hide'); } </script>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
