继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

js基础--Dom操作

远看寒山石径斜
关注TA
已关注
手记 268
粉丝 25
获赞 149

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>

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP