节点的操作

叁歲伎倆 2022-05-14 02:46 162阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    
    <style type="text/css">
    
    div{
    	border:#00FF00 1px solid;
    	height:60px;
    	width:120px;
    	margin:20px 0px 20px 20px;
    	padding:10px 0px 0px 20px;
    	}
    #div_1{
    	background-color:#0000CC;
    }
    #div_2{
    	background-color:#CC6633;
    	}
    #div_3{
    	background-color:#CCCC00;
    }
    #div_4{
    	background-color:#66CCCC;
    	}
    </style>
    
    <script type="text/javascript">
    
    function crtAndadd()
    {
    	//给第一个div添加一个文本节点
    	var textNode = document.createTextNode("div区域一");
    	var divNode = document.getElementById("div_1");
    	//divNode.appendChild(textNode);
    	
    	//添加一个超链接
    	var aNode = document.createElement("a");
    	aNode.href = "http://www.baidu.com";
    	aNode.innerText = "百度一下";
    	//divNode.appendChild(aNode);
    	//divNode.innerText = "div区域一hehe"
    	
    	//divNode.innerHTML = "div区域一hehe".fontcolor('red');
    	divNode.innerHTML = "<input type = 'button' value = '按钮'/>";
    }
    
    function delNode()
    {
    	var divNode = document.getElementById("div_2");
    	var textNode = divNode.childNodes[0];
    	//divNode.removeChild(textNode);
    	
    	//对于文本的删除更简单的删除
    	//divNode.innerHTML = "";
    	
    	//把div_2节点删除
    	//方式一
    	//找到div_2的父节点，然后用removeChild把div_2这个子节点删除
    	//divNode.parentNode.removeChild(divNode);
    	
    	//方式二
    	divNode.removeNode(true);
    }
    
    function rplNode()
    {
    	var divNode = document.getElementById("div_3");
    	var oldTextNode = divNode.childNodes[0];
    	var newTextNode = document.createTextNode("一个新的文本");
    	
    	//divNode.replaceChild(newTextNode, oldTextNode);
    	//用div区域三替换div区域一
    	
    	var divNode_1 = document.getElementById("div_1");
    	div_1.replaceNode(divNode);
    }
    
    function copyNode()
    {
    	var divNode_1 = document.getElementById("div_1");
    	var divNode_4 = document.getElementById("div_4");
    	
    	var copy_4 = divNode_4.cloneNode(true);
    	divNode_1.replaceNode(copy_4);
    }
    
    </script>
    
    </head>
    
    <body>
    
    <input type="button" value="创建并添加节点" οnclick="crtAndadd()" />
    <input type="button" value="删除节点" οnclick="delNode()" />
    <input type="button" value="替换节点" οnclick="rplNode()" />
    <input type="button" value="克隆节点" οnclick="copyNode()" />
    
    <hr />
    
    <div id="div_1">
    </div>
    
    
    <div id="div_2">
    div区域二
    </div>
    
    
    <div id="div_3">
    div区域三
    </div>
    
    
    <div id="div_4">
    div区域四
    </div>
    
    </body>
    </html>