十一、节点的替换
11.1replaceChild():把一个给定父元素里的一个子节点替换为另一个子节点
var reference=element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
11.2该节点除了替换功能以外还有移动的功能。
11.3该方法只能完成单向替换,若需要使用双向替换,需要自定义函数:
//自定义互换两个节点的函数
function replaceEach(aNode,bNode){
//1.获取aNode和bNode的父节点,使用parentNode属性
var aParent=aNode.parentNode;
var bParent=bNode.parentNode;
if(aParent&&bParent){
//2.克隆aNode或bNode
var aNode2=aNode.cloneNode(true);
//3.分别调用aNode的父节点和bNode的父节点的replaceChild()实现节点的互换
bParent.replaceChild(aNode2,bNode);
aParent.replaceChild(bNode,aNode);
}
}
※※※例子
例三:
需求:为所有的li节点添加onclick响应函数,实现city子节点和game子节点对应位置的元素的互换。
window.οnlοad=function(){
//自定义互换两个节点的函数
function replaceEach(aNode,bNode){
//1.获取aNode和bNode的父节点,使用parentNode属性
var aParent=aNode.parentNode;
var bParent=bNode.parentNode;
if(aParent&&bParent){
//2.克隆aNode或bNode
var aNode2=aNode.cloneNode(true);
//克隆aNode的同时,把onclick事件也复制
aNode2.οnclick=aNode.onclick;
//克隆aNode的同时,把index属性也复制
aNode2.index=aNode.index;
//3.分别调用aNode的父节点和bNode的父节点的replaceChild()实现节点的互换
bParent.replaceChild(aNode2,bNode);
aParent.replaceChild(bNode,aNode);
}
}
//1.获取所有的li节点
var liNodes=document.getElementsByTagName("li");
//2.为每一个li节点添加Onclick响应函数
for(var i=0;i<liNodes.length;i++){
//手动为每个li节点添加一个index属性
liNodes[i].index=i;
liNodes[i].οnclick=function(){
//3.找到和当前节点对应的那个li节点
var targetIndex=0;
if(this.index<4){
targetIndex=4+this.index;
}else{
targetIndex=this.index-4;
}
//交换index属性
var tempIndex=this.index;
this.index=liNodes[targetIndex].index;
liNodes[targetIndex].index=tempIndex;
//4.互换
replaceEach(this,liNodes[targetIndex]);
}
}
}
十三、删除节点
removeChild():从一个给定元素里删除一个子节点
varreference=element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
如果想删除某个节点,但不知道它的父节点是哪一个,parentNode属性可以帮忙。
window.οnlοad=function(){
//为每一个li节点添加一个confirm(确认对话框):确定要删除xx的信息吗?
//若确定,则删除
var liNodes=document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++){
liNodes[i].οnclick=function(){
var flag=confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗?");
if(flag){
this.parentNode.removeChild(this);
}
}
}
}