(8)JavaScript DOM節點的替換
阿新 • • 發佈：2018-11-27
節點的替換：
- replaceChild（）： 把一個給定父元素裡的一個子節點替換成另外一個子節點 var reference = element.replaceChild（newChild，oldChild）；
- 該節點除了替換功能以外還有移動的功能
- 該方法只能完成單向替換，若需要使用雙向替換，需要自定義函式
節點的替換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> 結果
題目
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>