dom元素

最新推荐文章于 2024-07-14 09:32:28 发布

原创最新推荐文章于 2024-07-14 09:32:28 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #html5

本文介绍了如何使用JavaScript操作DOM，包括通过父节点删除元素、设置和获取标签属性、添加新标签以及实现全选、反选、全不选功能。还展示了模拟发微博、后台管理系统和商品增删改查的示例，涉及元素的创建、追加、删除以及状态切换。

一.通过dom删除某个标签

通过父节点删除该标签


<button id="btn">按钮</button>
<script>
//点击按钮后删除这个标签
btn.onclick=function(){
    this.parentNode.removeChild(this);
}
</script>

二.通过社区方法实现控制选项框

id名是唯一的，可以直接通过id名获取标签（此时取id名的时候，需要遵循变量的命名规则）

增加/修改标签属性

获取标签.属性名字(如果是class需要变成className)="值"

获取属性的值获取标签.属性名字

三.添加标签

克隆标签 a.cloneNode()克隆a标签

a.appendChild(b)把b追加到a的内部的后面

a.insertBefore(b.c);把c追加到b同级之前 a是c的父级

案例：模拟发微博的案例添加到消息的最后

    <textarea name="" id="txt" cols="30" rows="10" placeholder="请输入内容"></textarea>
    <button id="btn">发布</button>
    <ul id="warp">
        <li>昨天天气很好
            <p>2021-09-03</p>
            <span onclick="del(this)">X</span>
        </li>
    </ul>
    <script>
        //第一步给button绑定点击事件
        //因为id是唯一的，所以可以直接通过id名获取标签
        btn.onclick=function(){
            //获取表单里的内容
            var val=txt.value;
            // 判断内容是否为空
            if(txt.value=""){
                alert("请输入内容")
            }else{
                 //创建标签
                var tag=document.createElement("li");
                var d=new Date();
                //给标签增加内容
                tag.innerHTML=val+"<p>"+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+"</p><span>X</span>";
                //追加标签 insertBefore（a，b）吧a追加到b之前
                warp.insertBefore(tag,warp.children[0])
                //增加玩表单元素后，吧表单元素的值清空；
                txt.value=""
            }
           
        }
        function del(a){
            console.log(a)
            a.parentNode.parentNode.removeChild(a.parentNode)
        }

案例：实现按钮的全选，反选和全不选

<button id="btn">全选</button>
    <button id="btn2">全不选</button>
    <button id="btn3">反选</button>
        <input type="checkbox">1
        <input type="checkbox">2
        <input type="checkbox">3
        <input type="checkbox">4
        <input type="checkbox">5
        <input type="checkbox">6
        <input type="checkbox">7
        <input type="checkbox">8
    <script>
        var all=document.getElementById("btn");
        var not=document.getElementById("btn2");
        var r=document.getElementById("btn3");
        var tags=document.getElementsByTagName("input")
        //全选
        all.onclick=function(){
           for(var i=0;i<tags.length;i++){
               tags[i].checked=true
           }
        }
        //全不选
        not.onclick=function(){
           for(var i=0;i<tags.length;i++){
               tags[i].checked=false
           }
        }
        //反选
        r.onclick=function(){
           for(var i=0;i<tags.length;i++){
               tags[i].checked=!tags[i].checked
           }
        }

案例：模拟后台管理系统

    <input type="text" placeholder="请输入商品的名字" id="proname">
    <input type="text" placeholder="请输入商品的价格" id="price">
    <button id="all">新增商品</button>
    <table id="box">
        <tr class="head">
            <td>选择</td>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="check"></td>
            <td>红米</td>
            <td>1999</td>
            <td><a class="del" href="javascript:;">删除<a></td>

        </tr>
    </table>
    <button id="delall">把选中的删除</button>
    <button id="allcheck">全选</button>  
    <script>
        var checkbox = document.getElementsByTagName('input');
        var allcheck=document.getElementById("allcheck");
        var tags=document.getElementsByClassName("del")
        //新增商品
        all.onclick=function(){
            //获取表单元素的值
            var pn=proname.value;
            var p=price.value
            //创建标签
            var tr=document.createElement("tr");
            var td=document.createElement("td");

            //新增内容
            var a = document.createElement('a');
			a.href= "javascript:;";
			a.innerHTML = "删除";
			td.appendChild(a);
            tr.innerHTML='<td><input type="checkbox"></td><td>'+pn+'</td> <td>'+p+'</td>'
            tr.appendChild(td);
            box.appendChild(tr)
            var tags=document.getElementsByClassName("del")
            a.onclick=function(){
                // this.parentNode.removeChild(this)
                console.log("1");
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)

            }

        }
        //全选
        allcheck.onclick=function(){
           for(var i=0;i<checkbox.length;i++){
            checkbox[i].checked=true
           }
        }
        //删除
        //把选中的删除  
        delall.onclick=function(){
            for(var j=0;j<tags.length;j++){
                // console.log(checkbox[2].checked)
                console.log(checkbox.length);
                for(var k=2;k<checkbox.length;k++){
                    if(checkbox[k].checked){
                        checkbox[k].parentNode.parentNode.parentNode.removeChild(checkbox[k].parentNode.parentNode)
                    }
                }
                
            }
        }
        for(var i=0;i<tags.length;i++){
                tags[i].onclick=function(){
                    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
                }
            }

商品的增删改查

通过input加了disabled后变得无法修改实现，需要修改的时候移出disabled，修改完成后加入disabled

<input type="text" placeholder="请输入商品名字" id="proname">
    <input type="text" placeholder="请输入商品的价格" id="proprice">
    <button id="add">新增商品</button>
    <button id="all">全选</button>
    <button id="not">全不选</button>
    <button id="r">反选</button>
    <button id="alldel">批量删除</button>

    <table id="box">
        <tr class="head">
            <td>选择</td>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>编辑</td>
            <td>编辑</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checks">
            </td>
            <td>
                <!-- 商品如果可以编辑，使用input框才可以实现 -->
                <input type="text" value=华为手机 disabled>
            </td>
            <td>
                <input type="text" value=1999 disabled>
            </td>
            <td onclick="edit(this)">
                编辑
            </td>
            <td onclick="del(this)">
                删除
            </td>
        </tr>
    </table>
    <script>
        //绑定点击事件
        add.onclick=function(){
            //获取单元格的值
            var proname1=proname.value;
            var proprice1=proprice.value
            //创建标签
            var tag=document.createElement("tr");
            //追加内容
            //模板字符串 进行变量和常量的拼接`${变量}`（反引号，1左边的那个键）
            tag.innerHTML=`
            <td>
                <input type="checkbox" class="checks">
            </td>
            <td>
                <!-- 商品如果可以编辑，使用input框才可以实现 -->
                <input type="text" value="${proname1}" disabled>
            </td>
            <td>
                <input type="text" value="${proprice1}" disabled>
            </td>
            <td onclick="edit(this)">编辑</td>
            <td onclick="del(this)">删除</td>`;
            //追加标签
            box.children[0].insertBefore(tag,box.children[0].children[1])
        }
        function del(a){
            a.parentNode.parentNode.removeChild(a.parentNode)
        }
        function edit(a){
            //判断当前的状态
            if(a.innerHTML=="编辑"){
                //通过点击的父节点的第几个孩子来找到需要移出的input
                a.parentNode.children[1].children[0].removeAttribute("disabled");
                a.parentNode.children[2].children[0].removeAttribute("disabled");
                a.innerHTML="修改";
            }else{
                a.parentNode.children[1].children[0].setAttribute("disabled",true);
                a.parentNode.children[2].children[0].setAttribute("disabled",true);
                a.innerHTML="编辑"
            }
        }
        //全选
        var tags=document.getElementsByClassName("checks");
        all.onclick=function(){
            for(var i=0;i<tags.length;i++){
                tags[i].checked=true;
            }
        }
        not.onclick=function(){
            for(var i=0;i<tags.length;i++){
                tags[i].checked=true;
            }
        }
        r.onclick=function(){
            for(var i=0;i<tags.length;i++){
                tags[i].checked=true;
            }
        }
        //批量删除
        alldel.onclick=function(){
            for(var i=0;i<tags.length;i++){
                if(tags[i].checked){
                    tags[i].parentNode.parentNode.parentNode.removeChild(tags[i].parentNode.parentNode)
                //在删除之后会改变索引，如果在连续伤处的时候，后面的内容的索引会上去，但是
                //循环的i还是会加1导致漏删，随意需要i--让删除的内容再扫一次该索引看看时候被勾选
                    i--;
                }
            }
        }
    </script>