day35—JavaScript操作元素（创建、删除）

转行学开发，代码100天——2018-04-20

JavaScript对DOM元素的创建、删除操作。

 

1.创建DOM元素

 

appendChild方法

• createElement(ochild);
• oparent.appendChild(ochild)

insertBefore方法

• createElement(ochild);
• insertBefore（ochild,opos）;

如通过按钮操作，创建元素

<input  id = "txt" type="text" name="text">
<input id ="Abtn" type="button" value="向前添加" name="添加">
<input id ="Bbtn" type="button" value="向后添加" name="添加">
<ul id="ull"></ul>

<script type="text/javascript">
        window.onload = function () {
            var oBtn0 = document.getElementById("Abtn");
            var oBtn1 = document.getElementById("Bbtn");
            var oUl = document.getElementById("ull");
            var oTxt = document.getElementById("txt");
            // var oLi = document.createElement('li');
            //向前插入
            oBtn0.onclick = function(){
                if (oTxt.value=="") {
                    alert("请填写添加内容");
                }else
                {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = oTxt.value;
                    var aLi = oUl.getElementsByTagName('li');
                    if (aLi.length>0) {
                        oUl.insertBefore(oLi,aLi[0])
                    }else
                    oUl.appendChild(oLi);
                }
            };

            //向后插入

            oBtn1.onclick =function(){
                if (oTxt.value=="") {
                    alert("请填写添加内容");
                }else
                {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = oTxt.value;
                  //父节点.append(子节点)
                  oUl.appendChild(oLi);
              }
            };
      };
    </script>

通过上述代码实现li元素及其内容的添加。

 

但是，由于浏览器兼容性问题，在向前插入的代码段中对li个数进行了判断

           //向前插入
            oBtn0.onclick = function(){
                if (oTxt.value=="") {
                    alert("请填写添加内容");
                }else
                {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = oTxt.value;
                    var aLi = oUl.getElementsByTagName('li');
                    if (aLi.length>0) {
                        oUl.insertBefore(oLi,aLi[0])
                    }else
                    oUl.appendChild(oLi);
                }
            };

2.元素的删除

父级.removeChild(子节点); //彻底删除元素

如：

    <div id="container">
        <ul id="ul">
            <li>asjhasf<a href="javascript:;">删除</a></li>
            <li>432sdf<a href="javascript:;">删除</a></li>
            <li>asj23fsfhasf<a href="javascript:;">删除</a></li>
            <li>23tvasjhasf<a href="javascript:;">删除</a></li>
        </ul>
    </div>

通过选择“删除”即将当前行内容删除

JavaScript实现中，首先获取ul父级节点，即当前a标签。利用removeChild方法删除

   //删除元素功能

            var oull = document.getElementById("ul");
            var oa = oull.getElementsByTagName("a");
            for (var i = 0; i < oa.length; i++) {
                oa[i].onclick = function()
                {
                    oull.removeChild(this.parentNode);  
                }
            }

 

3.文档碎片：DocumentFragment

一个很形象的比喻，即文档碎片相当于生活中的购物袋。当我们购买的物品较多时，往往通过购物袋打包拎回家。当然，物品较少时直接拎回去得了。

于此类似，当我们需要插入很多元素时，先将插入的元素装入文档碎片中，最后将该文档碎片添加到父节点即可。

（果真，计算机世界是对现实生活的模拟啊）

   //文档碎片

            var aul = document.getElementById("oul");
            var oFrag = document.createDocumentFragment();
            for (var i = 0; i < 1000 ; i++) {
                  var oli = document.createElement("li");
                  oFrag.appendChild(oli);
            }

            aul.appendChild(oFrag);

文档碎片的使用对网页性能影响不大，已较少使用。