javascript DOM(四)----ノード置換
3207 ワード
ノードの置換:
1)replacceChild():与えられた親要素のうちの1つのサブノードを別のサブノードに置き換える.
var reference=element.replacceChild(newChild,oldChild)
戻り値は、置換されたサブノードを指す参照ポインタです.
2)このノードは、代替機能以外にも移動機能がある.
3)この方法は一方向の置換しかできません.双方向の置換が必要な場合、カスタム関数が必要です.
/**
*aNodeとbNodeを交換する
*@param{Object}aNode
*@param{Object}bNode
*/
function replacceEach(aNode,bNode){
if(aNode==bNode){
return;
)
var a PartentNode=aNode.parent Node;
//もしaNodeに親ノードがあるなら
if(aPartentNode){
var bPartentNode=bNode.parent Node;
//もしbNodeには親ノードがあります.
if(bPartentNode){
var tempNode=aNode.cloneNode(true);
bPartentNode.replacceChild(tempNode、bNode)
aPartentNode.replacceChild(bNode,aNode);
)
)
)
1)replacceChild():与えられた親要素のうちの1つのサブノードを別のサブノードに置き換える.
var reference=element.replacceChild(newChild,oldChild)
戻り値は、置換されたサブノードを指す参照ポインタです.
2)このノードは、代替機能以外にも移動機能がある.
3)この方法は一方向の置換しかできません.双方向の置換が必要な場合、カスタム関数が必要です.
/**
*aNodeとbNodeを交換する
*@param{Object}aNode
*@param{Object}bNode
*/
function replacceEach(aNode,bNode){
if(aNode==bNode){
return;
)
var a PartentNode=aNode.parent Node;
//もしaNodeに親ノードがあるなら
if(aPartentNode){
var bPartentNode=bNode.parent Node;
//もしbNodeには親ノードがあります.
if(bPartentNode){
var tempNode=aNode.cloneNode(true);
bPartentNode.replacceChild(tempNode、bNode)
aPartentNode.replacceChild(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>