js的节点交换
//实现：city子节点与game子节点对应的位置的元素互换
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>节点互换</title>
<script type="text/javascript">
window.onload = function(){
//进行节点互换的自定义函数方法
function changeNode(aNode,bNode){
//1.获取两个父节点
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;
//2.判断父节点是否存在
if(aParent && bParent){
//克隆两个节点中的任意一个
var clon = aNode.cloneNode(true);
//克隆节点的同时，也要复制onclick事件
clon.onclick = aNode.onclick;
clon.index = aNode.index;
bParent.replaceChild(clon,bNode);
aParent.replaceChild(bNode ,aNode);
}
}
//1.首先获取所有的li的所有节点
var liNodes = document.getElementsByTagName("li");
//2.遍历所有的节点
for(var i=0;i<liNodes.length;i++){
//手动为每个li节点添加一个 index 属性
//此时的index属性代表：不传递参数，返回这个元素在同辈中的索引位置。
liNodes[i].index = i;
liNodes[i].onclick = function(){
//3.找到与city节点相对应的game节点
var targetIndex = null;
if(this.index <3){
targetIndex = 3 + this.index;
}else{
targetIndex = this.index - 3;
}
//交换 index 属性
var tempIndex = this.index;
this.index = liNodes[targetIndex].index;
liNodes[targetIndex].index= tempIndex;
//4.节点进行互换
changeNode(this,liNodes[targetIndex]);
}
}
}
</script>
<body>
<ul id="city">
<li id ="hz">杭州</li>
<li>西安</li>
<li>合肥</li>
</ul>
<br><br>
<p>请选择游戏</p>
<ul id="game">
<li id = "wz">LOL</li>
<li>吃鸡</li>
<li>消消乐</li>
</ul>
<br><br>
</body>
</html>