webAPI中的元素的相关的方法

静态页面

<body id="bd">
	<input type="button" id="btn1" value="显示效果">
	<input type="button" id="btn2" value="干掉第一个子元素">
	<input type="button" id="btn3" value="干掉所有的子元素">
	<input type="button" id="btn4" value="替换">
	<input type="button" id="btn5" value="克隆">
	<div id="dv"></div>
</body>

在项目中新建一个名为comment.js文件，并定义一个通过id选择器获取元素的方法。

function my$(id){
    return document.getElementById(id);
}

将comment.js文件引入当前页面中，在此页面中通过id获取元素就可以不用写document.getElementById(“元素id名”)，直接调用my$(“元素id名”)的方法

   <script src="comment.js"></script>

js部分

<script>
//定义一个变量用于显示创建的按钮文本显示
    var i=0;
    my$("btn1").onclick=function () {
    //让i每次循环完后自身的值加1
        i++;
        var obj=document.createElement("input");
        obj.type="button";
        obj.value="按钮"+i;
        my$("dv").appendChild(obj);
        //添加到第一个子元素的前面
        // insertBefor(要添加的元素,添加到某个元素的前面)
        my$("dv").insertBefore(obj,my$("dv").firstElementChild)
    }


    //移除父元素的第一个子元素
    my$("btn2").onclick=function () {
        //removrChild(移除的元素)
        my$("dv").removeChild(my$("dv").firstElementChild)
    }

    //移除所有的子元素
    my$("btn3").onclick=function () {
        //循环的删除第一个子元素
        while (my$("dv").firstElementChild){
            my$("dv").removeChild(my$("dv").firstChild)
        }
    }

    //替换子元素
    my$("btn4").onclick=function () {
        var newTxt=document.createElement("a");
        newTxt.innerHTML="好困鸭";
        my$("dv").replaceChild(newTxt,my$("dv").firstElementChild);
    }


    //克隆  复制     要克隆的元素 .cloneNode(布尔值)
    //点击克隆"显示效果"的按钮
    my$("btn5").onclick=function () {
      var inp=  my$("btn1").cloneNode(true);
       my$("bd").appendChild(inp)
    }

</script>

webAPI中的元素的相关的方法

猜你喜欢