（第七天）DOM练习一

动态删除元素

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

window.onload = function() {
var list = document.getElementsByTagName("ul")[0].childNodes; （1）
console.log(list.length); （2）
var list=document.getElementById("list"); （3）
for (var i = 0; i < list.length; i++) {
list[i].onclick = function() {
console.log(i);  （4）
console.log(list[i].innerHTML);  （5）
this.parentNode.removeChild(this);  （6）
}
}
}

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</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 = 0; i < list.childNodes.length; i++) {
list.childNodes[i].onclick = function() {
var ns = this.nextSibling;
list.insertBefore(ns,this);
}
}
}

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

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



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

window.onload = function() {
var list = document.getElementById("list");
for (var i = 0; i < list.childNodes.length; i++) {
if (list.childNodes[i].nodeType == 1) {  //节点类型为元素类型
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 = 0; i < list.childNodes.length; i++) {
if (list.childNodes[i].nodeType == 1) {
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 = 0; i < list.childNodes.length; i++) {
if (list.childNodes[i].nodeType == 1) {
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 = 0; i < list.childNodes.length; i++) {
if (list.childNodes[i].nodeType == 1) {
list.childNodes[i].onclick = function() {
ip.value = this.innerHTML;
this.appendChild(ip);
this.removeChild(this.firstChild);
ip.focus();
}
}
}
}

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

总结

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