1.节点的替换:
①replaceChild():
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
②该节点除了替换功能以外还有移动的功能.
③该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
dom8.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //节点互换 window.onload = function() { //定义互换两个节点的函数 function replaceEach(aNode, bNode) { //1.获取aNode，bNode的父节点，使用parentNode属性 var aParent = aNode.parentNode; var bParent = bNode.parentNode; if (aParent && bParent) {//a b 都有父节点的话 //2.克隆aNode，或者bNode var aNode2 = aNode.cloneNode(true); //3.分别调用aNode 的父节点和bNode的父节点的 a replaceChild(x,a)方法实现节点的互换 bParent.replaceChild(aNode2, bNode); aParent.replaceChild(bNode, aNode); } } alert(1); var bjNode = document.getElementById("bj"); var rlNode = document.getElementById("rl"); replaceEach(bjNode, rlNode); } </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> name： <input type="text" name="username" id="name" value="xiaoxiaolin"> </body> </html>
练习：为所有的li节点添加onclick响应函数
实现city子节点和game子节点对应位置元素的互换
ex4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> // 需求：为所有的li节点添加onclick响应函数 // 实现city子节点和game子节点对应位置元素的互换 window.onload = function() { //自定义互换两个节点的函数 function replaceEach(aNode, bNode) { //1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性 var aParent = aNode.parentNode; var bParent = bNode.parentNode; if (aParent && bParent) { //2. 克隆 aNode 或 bNode var aNode2 = aNode.cloneNode(true); //克隆 aNode 的同时, 把 onclick 事件也复制. aNode2.onclick = aNode.onclick; //克隆 aNode 的同时, 把 onclick 事件也复制. aNode2.index = aNode.index; //3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild() //方法实现节点的互换 bParent.replaceChild(aNode2, bNode); aParent.replaceChild(bNode, aNode); } } //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() { //alert("index: " + this.index); //3. 找到和当前节点对应的那个 li 节点 var targetIndex = 0; if (this.index < 4) { targetIndex = 4 + this.index; } else { targetIndex = this.index - 4; } //交换 index 属性. var tempIndex = this.index; this.index = liNodes[targetIndex].index; liNodes[targetIndex].index = tempIndex; //4. 互换. replaceEach(this, liNodes[targetIndex]); } } } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj">北京</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> <form action="dom-7.html" name="myform"> <input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="game">游戏 name: <input type="text" name="name" /> <input type="submit" value="Submit" id="submit" /> </form> </body> </html>