DOM替换节点:也就是说用新的节点把旧的节点替换掉
replaceChild()
(1) 把一个给定父元素里的一个子节点替换为另外一个子节点
Var reference = element.replaceChild(newChild,oldChild);
(2) 返回值是一个指向已被替换的那个子节点的引用指针
(3) 如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中
案例:
example05.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>example01.html</title>
</head>
<body>
<div align="center">
<div id="bdy">
<select name="edu" id="edus">
<option value="篮球" id="lq">篮球</option>
<option value="足球">足球</option>
<option value="羽毛球">羽毛球</option>
<option value="游泳" id="yy">游泳</option>
</select>
</div>
<!—把type类型换成 button 和 checkbox 分别在IE和firefox浏览器下测试-à
<input type="text" id="uname"/>
</div>
</body>
</html>
<script type="text/javascript">
<!--
//当窗体加载完毕后触发匿名函数
window.onload = function(){
//把type类型换成 button 和 checkbox 分别在IE和firefox浏览器下测试
var unameNode = document.getElementById("uname");
//unameNode.setAttribute("type","button");
unameNode.setAttribute("type","checkbox");
test1();
}
function test2(){
//获取edus节点的name属性的值
var edus = document.getElementById("edus");
//getAttribute() 获取该节点的属性名称=name值
var value = edus.getAttribute("name");
//获取该节点的指定名称的属性节点
var nameNode = edus.getAttributeNode("name");
alert(nameNode.nodeName+"----"+nameNode.nodeType+"----"+value);
//节点
edus.setAttribute("name","pangli");
//为节点添加属性 属性名 属性值 ""
var value = edus.getAttribute("name");
alert(value);
function test1(){
//找到替换节点的父节点
var lqNode = document.getElementById("lq");
//父节点
var edusNode = lqNode.parentNode;
var yyNode = document.getElementById("yy");
//父节点
edusNode.replaceChild(yyNode,lqNode);
}
test1();
}
//-->
</script>