js基础--Dom操作

发布时间：2020-08-10 15:53:14 来源：网络阅读：444 作者：M_x_M 栏目：web开发

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.选择菜单
主界面
js基础--Dom操作
弹出框

<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.左侧菜单栏
js基础--Dom操作

<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>

向AI问一下细节

js基础--Dom操作

猜你喜欢

最新资讯

相关推荐

相关标签