动态删除元素

给定一个ul列表，点击ul中子节点进行删除

             window.onload = function() {

                 var list = document.getElementsByTagName("ul")[].childNodes; （）

                 console.log(list.length); （）

                 var list=document.getElementById("list"); （）

                 for (var i = ; i < list.length; i++) {

                     list[i].onclick = function() {

                         console.log(i);  （）

                         console.log(list[i].innerHTML);  （）

                         this.parentNode.removeChild(this);  （）

                     }

                 }

             }

           <ul id="list">

              <li></li>

              <li></li>

              <li></li>

              <li></li>

              <li></li>

           </ul>

 /*

 解析：可以通过（1）或者（3）来获取列表元素id。（2）中打印出来的列表长度为11，因为其中包含6个空文本节点。（4）中打印出11，因为

 此时还未进行点击，所以直到循环完，并返回11，当然此时（5）会出现下面错误！

 */

动态添加元素

依然以上面为例，此时来进行添加元素。

var li = document.createElement("li");


li.innerHTML = "动态添加";

list.appendChild(li);  /*在列表ul中最后进行追加一个元素li*/

list.insertBefore(li,list.childNodes[2]); 

/*

在ul中第二个子节点前添加一个li，此时第二个为空文本节点，也可以为

list.insertBefore(li,list.childNodes[3]);此时第三个为li将覆盖第二个的空文本节点

*/

动态交换元素

给定一个ul列表以及数据，现在点击某一节点和下一节点进行交换。

             window.onload = function() {

                 var list = document.getElementById("list");

                 for (var i = ; i < list.childNodes.length; i++) {

                     list.childNodes[i].onclick = function() {

                         var ns = this.nextSibling;

                         list.insertBefore(ns,this);

                     }

                 }

             }

            <ul id="list">

              <li></li>

              <li></li>

              <li></li>

              <li></li>

              <li></li>

              <li></li>

            </ul>

以上代码貌似没错，但是当我点击最后一个节点时出现如下错误

说明考虑不周，当点击最后一个节点时是没有下一个li节点的，此时下一个节点为#text（空文本节点），则此时应出去文本节点必须是点击的li即element（元素节点）修改如下：

            window.onload = function() {

                var list = document.getElementById("list");

                for (var i = ; i < list.childNodes.length; i++) {

                    if (list.childNodes[i].nodeType == ) {  //节点类型为元素类型

                        list.childNodes[i].onclick = function() {

                            var ns = this.nextSibling;

                            list.insertBefore(ns, this);

                        }

                    }

                }

            }

此时操作还是会出现上述错误！最终得知 nextSibling 是包含空文本节点，而 nextElementSibling 只得到元素节点，所以最终代码修改为：

            window.onload = function() {

                var list = document.getElementById("list");

                for (var i = ; i < list.childNodes.length; i++) {

                    if (list.childNodes[i].nodeType == ) {

                        list.childNodes[i].onclick = function() {

                            if (this.nextElementSibling) {

                                var ns = this.nextElementSibling;

                                list.insertBefore(ns, this);

                            }

                        }

                    }

                }

            }

动态修改元素

同样给定一个ul列表当点击其子节点时进行修改并保存，其列表如下：

        <ul id="list">

            <li>长沙</li>

            <li>岳阳</li>

            <li>株洲</li>

            <li>衡阳</li>

            <li>益阳</li>

            <li>常德</li>

        </ul>

第一步想到的是创建一个文本框元素，当点击li标签时，将其值赋给文本值且将其添加到li中，代码如下：

             var ip = document.createElement("input");

             ip.type = "text";

             window.onload = function() {

                 var list = document.getElementById("list");

                 for (var i = ; i < list.childNodes.length; i++) {

                     if (list.childNodes[i].nodeType == ) {

                         list.childNodes[i].onclick = function() {

                             ip.value = this.innerHTML;

                             this.appendChild(ip);

                         }

                     }

                 }

             }

当点击某个li后效果如下：

此时我们应该将li中的文本进行删除，所以我们需要添加的代码为：

this.removeChild(this.firstChild);

此时会出现一个问题，当点击下一个li标签时，上一个li将会移除，如图：

此时我们应该做的是：将其修改的值或未修改的值进行保存，当失去焦点时进行重新赋值即可！所以最终代码修改如下：

             var ip = document.createElement("input");

             ip.type = "text";

             ip.onblur = function() {

                 var _ip = ip.value;

                 ip.parentNode.innerHTML = _ip;

             }

             window.onload = function() {

                 var list = document.getElementById("list");

                 for (var i = ; i < list.childNodes.length; i++) {

                     if (list.childNodes[i].nodeType == ) {

                         list.childNodes[i].onclick = function() {

                             ip.value = this.innerHTML;

                             this.appendChild(ip);

                             this.removeChild(this.firstChild);

                             ip.focus();

                         }

                     }

                 }

             }

根据代码修改进行修改成功，界面如下：

巴特西

（第七天）DOM练习一

动态删除元素

动态添加元素

动态交换元素

动态修改元素

总结

在进行元素操作时，时刻要考虑DOM树中空文本节点的存在

最新文章

热门文章