js基础--Dom操作
标签：
JavaScript
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><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><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>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦