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>