DOM模型演示---增删改查中的删和改

来源：互联网发布：mac最大化的快捷键编辑：程序博客网时间：2024/06/05 19:17

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM模型演示---增删改查中的删和改</title>
<style type="text/css">
div{
border:#00ff00 solid 1px;
width:300px;
height:50px;
}
</style>
</head>
<body>
<div id="div1"> 第一个div </div>
<div id="div2"> 第二个div <a href="#a">aaaa</a><span>eeee</span></div>
<div id="div3"> 第三个div </div>
<div id="div4"> 第四个div </div>

<hr>
<input type="button" value="删除" onclick="delNode()"><br/>
<script type="text/javascript">
function delNode(){
var oDivNode = document.getElementById("div2");
//粗略的删除方式
//var boo = oDivNode.removeNode(false);//删除后，所有子节点上升一层
//var boo = oDivNode.removeNode(true);//连子节点一起删除

//更干净的删除方式
oDivNode.parentNode.removeChild(oDivNode);//removeChild()会整个子树一起删除
}
</script>
<br/>
<hr>
<input type="button" value="移动替换" onclick="updateNode()"><br/>
<input type="button" value="克隆替换" onclick="updateNode2()"><br/>
<script type="text/javascript">
//用div3 替换 div1
//1移动替换
function updateNode(){
var oDivNode1 = document.getElementById("div1");
var oDivNode3 = document.getElementById("div3");
//oDivNode1.replaceNode(oDivNode3);
oDivNode1.parentNode.replaceChild(oDivNode3,oDivNode1);//把div3移动到div1处替换
}
//2克隆替换
function updateNode2(){
var oDivNode1 = document.getElementById("div1");
var oDivNode3 = document.getElementById("div3");
var oCopyDiv3 = oDivNode3.cloneNode(true);//空参默认为cloneNode(false),代表子树不克隆。相反，cloneNode(true)会连子树一起克隆
oDivNode1.parentNode.replaceChild(oCopyDiv3,oDivNode1);//用div3替换div1
}
</script>
</body>
</html>

0 0