<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>DOM_节点练习</title>
<style type="text/css">
div{
border:#008FF0 solid 2px;
width:100px;
height:50px;
padding:5px;
margin:10px;
}
#div_1{background-color:blue;}
#div_2{background-color:red;}
#div_3{background-color:green;}
#div_4{background-color:orange;}
</style>
</head>
<body>
<h1>DOM_节点练习</h1>
<script type="text/javascript" src="a.js"> </script>
<input type="button" value="创建并添加文本节点1" onclick="DOM_demo_1()"/>
<input type="button" value="创建并添加按钮节点1" onclick="DOM_demo_2()"/>
<input type="button" value="innerHTML方式添加节点1" onclick="DOM_demo_3()"/>
<input type="button" value="删除节点1" onclick="DOM_demo_4()"/>
<input type="button" value="删除节点2" onclick="DOM_demo_5()"/>
<input type="button" value="替换节点1" onclick="DOM_demo_6()"/>
<input type="button" value="替换节点2" onclick="DOM_demo_7()"/>
<input type="button" value="克隆替换节点" onclick="DOM_demo_8()"/>
<script type="text/javascript">
/*
* firstNode=childNodes[0];
* lastNode=childNodes[childNodes.length-1];
*/
function DOM_demo_8(){
/*
* 需求：用DIV3替换DIV1：
* DIV中的方法3：用克隆的副本替换节点
* cloneNode(boolean) 从文档层次中复制对对象的引用。
* boolean:代表是否克隆子节点，默认是否false
* 具体过程是：先将DIV3复制后，再用副本替换DIV1的位置
*/
var oDiv_3=document.getElementById("div_3");
// var oCopyDiv_3=oDiv_3.cloneNode(false);//默认是false,不克隆子节点
var oCopyDiv_3=oDiv_3.cloneNode(true);//
var oDiv_1=document.getElementById("div_1");
oDiv_1.parentNode.replaceChild(oCopyDiv_3,oDiv_1);
}
function DOM_demo_7(){
/*
* 需求：用DIV3替换DIV1：
* DIV中的方法2：（建议使用）
* replaceChild 用新的子元素替换已有的子元素。
* 父Node.replaceNode(new子,old子);注意顺序
* 返回old子
* 同样是：直接将DIV3剪切后，替换到了DIV1的位置上
*/
var oDiv_1=document.getElementById("div_1");
var oDiv_3=document.getElementById("div_3");
oDiv_1.parentNode.replaceChild(oDiv_3,oDiv_1);
}
function DOM_demo_6(){
/*
* 需求：用DIV3替换DIV1：
* DIV中的方法1：（不建议使用）
* replaceNode 用其它元素替换对象。
* old.replaceNode(new);
* oDiv_1.replaceNode(oDiv_3);
* 直接将DIV3剪切后，替换到了DIV1的位置上
*/
var oDiv_1=document.getElementById("div_1");
var oDiv_3=document.getElementById("div_3");
oDiv_1.replaceNode(oDiv_3);
}
function DOM_demo_5(){
/*
* 删除节点方式2：经常使用！
* DIV中的方法：removeChild 从元素上删除子结点。
*/
var oDiv_1=document.getElementById("div_1");
oDiv_1.parentNode.removeChild(oDiv_1);
}
function DOM_demo_4(){
/*
* 删除节点方式1：（自 杀方式）较少使用！
* DIV中的方法：removeNode(boolean)
* 从文档层次中删除对象。
* boolean代表是否删除子节点，默认是false
*/
var oDiv_1=document.getElementById("div_1");
//oDiv_1.removeNode(false);//默认false，不删除子节点
oDiv_1.removeNode(true);//true代表删除子节点
}
function DOM_demo_3(){
/*
*设置innerHTML方式添加节点：
*/
var oDiv_1=document.getElementById("div_1");
//oDiv_1.innerHTML="我是innerHTML属性";
oDiv_1.innerHTML="<input type='button' value='按钮' />";
//强烈注意：双引号里面只能单引号，不能再使用双引号
}
function DOM_demo_2(){
/*
* 创建并添加按钮节点：
* 1，创建按钮节点,设置type
* 2，获得DIV节点
* 3，使用appendChild方法
*/
var oButtonNode=document.createElement("input");
oButtonNode.type="button";
oButtonNode.value="我是一个按钮";
var oDiv_1=document.getElementById("div_1");
oDiv_1.appendChild(oButtonNode);
}
function DOM_demo_1(){
/*
* 创建并添加节点的第1种方式：
* 1，createTextNode创建文本节点
* 2，获得DIV节点
* 3，使用appendChild方法
*/
var oTextNode=document.createTextNode("这个是文字");
var oDiv_1=document.getElementById("div_1");
oDiv_1.appendChild(oTextNode);
}
</script>
<div id="div_1">div区域。1</div>
<div id="div_2">div区域。2</div>
<div id="div_3">div区域。3</div>
<div id="div_4">div区域。4</div>
</body>
</html>
Copyright © 2019-2026 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
