Home思洋影视事业部网站建设知识库
0 Comments

详解JavaScript DOM中的Node节点(2)

发布于：2013-12-11  |   作者：广州网站建设  |   已聚集：人围观

Node的方法介绍：

◆hasChildNodes()：判定一个节点是否有子节点

◆removeChild()：去除一个节点

◆appendChild()：添加一个节点

◆replaceChild()：替换一个节点

◆insertBefore()：指定节点位置插入一个节点

◆cloneNode()：复制一个节点

◆normalize()：（不知）

◆hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false



    
	
  1. 
		<body name="ddd"> 
    2. 
	
  2. 
		<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
    3. 
	
  3. 
		<div id = "m"></div> 
    4. 
	
  4. 
		</body> 
    5. 
	
  5. 
		<script> 
    6. 
	
  6. 
		alert(document.getElementById("t").hasChildNodes());  
    7. 
	
  7. 
		alert(document.getElementById("m").hasChildNodes());  
    8. 
	
  8. 
		// 第一个true，第二个false  
    9. 
	
  9. 
		</script> 
    10. 




	removeChild()方法：去除一个节点：

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		<body name="ddd"> 
    2. 
	
  2. 
		<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var d = document.getElementById("t").firstChild;  
    6. 
	
  6. 
		document.getElementById("t").removeChild(d);  
    7. 
	
  7. 
		// <span>aaa</span>被去除  
    8. 
	
  8. 
		</script> 
    9. 




	appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。




    
	
  1. 
		<body name="ddd"> 
    2. 
	
  2. 
		<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var d = document.getElementById("t").firstChild;  
    6. 
	
  6. 
		document.getElementById("t").appendChild(d);  
    7. 
	
  7. 
		// <span>aaa</span>成了最后一个节点  
    8. 
	
  8. 
		</script> 
    9. 




	replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。




    
	
  1. 
		<body name="ddd"> 
    2. 
	
  2. 
		<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var newd = document.createElement("span");  
    6. 
	
  6. 
		newd.innerHTML = "eee";  
    7. 
	
  7. 
		var oldd = document.getElementById("t").lastChild;  
    8. 
	
  8. 
		document.getElementById("t").replaceChild(newd,oldd);  
    9. 
	
  9. 
		// 最后一项成了 eee  
    10. 
	
  10. 
		</script> 
    11. 




	insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入。




    
	
  1. 
		<body name="ddd"> 
    2. 
	
  2. 
		<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var newd = document.createElement("span");  
    6. 
	
  6. 
		newd.innerHTML = "eee";  
    7. 
	
  7. 
		var where = document.getElementById("t").lastChild;  
    8. 
	
  8. 
		document.getElementById("t").insertBefore(newd,where);  
    9. 
	
  9. 
		// 在最后一项的前面多了一项 eee  
    10. 
	
  10. 
		</script> 
    11. 




	cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点。

	广州网站建设,网站建设,广州网页设计,广州网站设计




    
	
  1. 
		<body name="ddd"> 
    2. 
	
  2. 
		<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var what = document.getElementById("t").cloneNode(false).innerHTML;  
    6. 
	
  6. 
		document.getElementById("m").innerHTML = what;  
    7. 
	
  7. 
		// 增加了一个aaabbbccc  
    8. 
	
  8. 
		</script> 
    9. 



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机