javascript DOM(四)----节点替换
节点的替换:
1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能. ?
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
/**
* 互换 aNode 和 bNode
* @param {Object} aNode
* @param {Object} bNode
*/
function replaceEach(aNode, bNode){
if(aNode == bNode){
return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){
var bParentNode = bNode.parentNode;
//若 bNode 有父节点
if(bParentNode){
var tempNode = aNode.cloneNode(true);
bParentNode.replaceChild(tempNode, bNode);
aParentNode.replaceChild(bNode, aNode);
}
}
?
} ??
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">window.onload = function(){//1. 把 "东京" 节点替换为 "平壤"var pr = document.createElement("li");pr.appendChild(document.createTextNode("平壤"));document.getElementById("city").replaceChild(pr, document.getElementById("dj"));//2. 实现 #bj 和 #rl 之间的互换, 需要使用 cloneNode() 方法var bj = document.getElementById("bj");var rl = document.getElementById("rl");////var city = document.getElementById("city");//var game = document.getElementById("game");////city.replaceChild(rl.cloneNode(true), bj);//game.replaceChild(bj, rl);replaceEach(rl, bj);};/** * 互换节点 * @param {Object} aNode * @param {Object} bNode */function replaceEach(aNode, bNode){var aParentNode = aNode.parentNode;var bParentNode = bNode.parentNode;//若 aNode 和 bNode 都存在父节点if(aParentNode && bParentNode){aParentNode.replaceChild(bNode.cloneNode(true), aNode);bParentNode.replaceChild(aNode, bNode);}}</script></head><body><p>你喜欢哪个城市?</p><ul id="city"><li id="bj" name="BeiJing">北京</li><li>上海</li><li id="dj">东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br><br>gender: <input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female</body></html>?
?
?
?