节点的替换:
- replaceChild(): 把一个给定父元素里的一个子节点替换成另外一个子节点 var reference = element.replaceChild(newChild,oldChild);
- 该节点除了替换功能以外还有移动的功能
- 该方法只能完成单向替换,若需要使用双向替换,需要自定义函数
节点的替换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//测试replaceChild方法
window.onload = function()
{
alert(1);
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("rl");
replaceEach(bjNode,rlNode);
}
//自定义函数 互换节点的函数
function replaceEach (aNode,bNode) {
//首先克隆一个aNode节点
var tempA = aNode.cloneNode(true);
//获取父亲节点
var apar = aNode.parentNode;
var bpar = bNode.parentNode;
//替换
bpar.replaceChild(tempA,bNode);
apar.replaceChild(bNode,aNode);
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id = "city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</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
name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>
结果
题目
1.需求: 为所有的li节点添加onclick 响应函数
2.实现city子节点和game子节点对应位置的元素的互换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//自定义 替换函数
//但是存在一个问题 就是我们点击的时候 能换过去 但是不能换回来
//所以交换的是节点 但是也要交换onclick事件 交换属性
function replaceEach (aNode,bNode) {
//首先克隆一个aNode节点
var tempA = aNode.cloneNode(true);
//获取父亲节点
var apar = aNode.parentNode;
var bpar = bNode.parentNode;
//克隆aNode 的同时 把onclick事件也复制。
tempA.onclick = aNode.onclick;
//克隆aNode 的同时 把onclick事件也复制。
tempA.index = aNode.index;
//替换
bpar.replaceChild(tempA,bNode);
apar.replaceChild(bNode,aNode);
}
//需求: 为所有的li节点添加onclick 响应函数
//实现city子节点和game子节点对应位置的元素的互换
window.onload = function()
{
//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].onclick = function () {
//3. 找到和当前节点对应的那个li节点
var targetIndex = 0;
if(this.index < 4){
targetIndex = 4 + this.index;
}else{
targetIndex = this.index - 4;
}
//获取到相对应的那个节点
var tarNode = liNodes[targetIndex];
//交换index属性
var tempIndex = this.index;
this.index = tarNode.index;
tarNode.index = tempIndex;
//4. 互换.
replaceEach(this,tarNode);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id = "city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</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
name: <input type="text" name="username" id="name" value="11111"/>
</body>
</html>