Javascript——元素相关操作方法

最新推荐文章于 2022-11-09 20:02:25 发布

原创最新推荐文章于 2022-11-09 20:02:25 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

这篇博客主要介绍了JavaScript中关于元素的操作，包括如何获取元素、替换元素和移除元素。重点讲解了如何确保元素的唯一性，即在创建新元素时先检查现有元素，存在则删除，不存在则进行创建，实现动态管理页面元素的过程。

获得元素，替换元素，移除元素

    <style>
        div{
            width: 200px;
            height: 150px;
            border: 2px dashed pink;
        }
    </style>
......
<body>
<input type="button" value="点击按钮获得子元素" id="btn"/>
<input type="button" value="替换第一个子元素" id="btn2"/>
<input type="button" value="替换所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
    var i=0;
    my$("btn").onclick=function(){
        i++;
        var obj=document.createElement("input");
        obj.type="button";
        obj.value="按钮"+i;
        //my$("dv").appendChild(obj);//追加子元素
        //把新的子元素插入到第一个子元素前面
        my$("dv").insertBefore(obj,my$("dv").firstElementChild);
    };
    my$("btn2").onclick=function(){
        //移除父级元素中的第一个子级元素
        my$("dv").removeChild(my$("dv").firstElementChild);
    };
    my$("btn3").onclick=function(){
       //点击按钮删除div中所有的子级元素
       //判断父级元素中有没有第一个子元素
       while(my$("dv").firstElementChild){
           my$("dv").removeChild(my$("dv").firstElementChild);
       }
    }
</script>
</body>

只创建一个元素：先判断有没有，有则删除，无则创建，一边创建一边删除

<input type="button" value="点击按钮获得子元素" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function(){
        //判断div中有没有这个按钮，有就删除
        //判断这个按钮的子元素是否存在
        if(my$("btn2")){//如果为true就有
            my$("dv").removeChild(my$("btn2"));
        }
        var obj=document.createElement("input");
        obj.type="button";
        obj.value="按钮";
        obj.id="btn2";
        my$("dv").appendChild(obj);
    };
</script>