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

在JavaScript中如何实现DOM操作(2)

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

5.创建和操作节点

（1）创建新节点，一张IE(6.0)和FF对DOM Level1的创建新节点方法支持的对照表：



    
	
  1. 
		方法                                                               IE                               FF  
    2. 
	
  2. 
		createAttribute(name)                                 Y                                Y  
    3. 
	
  3. 
		createCDATASection(text)                        N                                Y  
    4. 
	
  4. 
		createComment(text)                                    Y                                Y  
    5. 
	
  5. 
		createDocumentFragment()                        Y                                Y  
    6. 
	
  6. 
		createElement(tagName)                             Y                                 Y  
    7. 
	
  7. 
		createEntityReference(name)                     N                                 Y  
    8. 
	
  8. 
		createProcessingInstruction(  
    9. 
	
  9. 
		target,data)                                                   N                                  Y  
    10. 
	
  10. 
		createTextNode(text)                                  Y                                   Y 
    11. 




	（2）createElement(),createTextNode(),appendChild()

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




    
	
  1. 
		例子：  
    2. 
	
  2. 
		<html> 
    3. 
	
  3. 
		    <head> 
    4. 
	
  4. 
		        <title>createElement() Example</title> 
    5. 
	
  5. 
		        <script type="text/JavaScript"> 
    6. 
	
  6. 
		            function createMessage() {  
    7. 
	
  7. 
		                var oP = document.createElement("p");  
    8. 
	
  8. 
		                var oText = document.createTextNode("Hello World!");  
    9. 
	
  9. 
		                oP.appendChild(oText);  
    10. 
	
  10. 
		                document.body.appendChild(oP);  
    11. 
	
  11. 
		            }  
    12. 
	
  12. 
		        </script> 
    13. 
	
  13. 
		    </head> 
    14. 
	
  14. 
		    <body onload="createMessage()"> 
    15. 
	
  15. 
		    </body> 
    16. 
	
  16. 
		</html> 
    17. 




	在页面载入后，创建节点oP，并创建一个文本节点oText,oText通过appendChild方法附加在oP节点上，为了实际显示出来，将oP节点通过appendChild方法附加在body节点上。此例子将显示Hello World!



	（3）removeChild(),replaceChild()和insertBefore()



	从方法名称就知道是干什么的：删除节点，替换节点，插入节点。需要注意的是replaceChild和insertBefore两个参数都是新节点在前，旧节点在后。



	（4）createDocumentFragment()



	此方法主要是为了解决大量添加节点时，速度过慢。通过创建一个文档碎片节点，将要添加的新节点附加在此碎片节点上，然后再将文档碎片节点append到body上面，替代多次append到body节点。

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




    
	
  1. 
		<html> 
    2. 
	
  2. 
		    <head> 
    3. 
	
  3. 
		        <title>insertBefore() Example</title> 
    4. 
	
  4. 
		        <script type="text/JavaScript"> 
    5. 
	
  5. 
		            function addMessages() {  
    6. 
	
  6. 
		                var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];  
    7. 
	
  7. 
		                  
    8. 
	
  8. 
		                var oFragment = document.createDocumentFragment();  
    9. 
	
  9. 
		                  
    10. 
	
  10. 
		                for (var i=0; i < arrText.length; i++) {  
    11. 
	
  11. 
		                    var oP = document.createElement("p");  
    12. 
	
  12. 
		                    var oText = document.createTextNode(arrText[i]);  
    13. 
	
  13. 
		                    oP.appendChild(oText);  
    14. 
	
  14. 
		                    oFragment.appendChild(oP);  
    15. 
	
  15. 
		                }  
    16. 
	
  16. 
		                  
    17. 
	
  17. 
		                document.body.appendChild(oFragment);  
    18. 
	
  18. 
		 
    19. 
	
  19. 
		            }  
    20. 
	
  20. 
		        </script> 
    21. 
	
  21. 
		    </head> 
    22. 
	
  22. 
		    <body onload="addMessages()"> 
    23. 
	
  23. 
		 
    24. 
	
  24. 
		    </body> 
    25. 
	
  25. 
		</html> 
    26. 




	HTML DOM的特征功能



	HTML DOM的特性和方法不是标准的DOM实现，是专门针对HTML同时也让一些DOM操作变的更加简便。



	1.让特性像属性一样



	访问某元素的特性需要用到getAttribute(name)方法，HTML DOM扩展，可以直接使用同样名称的属性来获取和设置这些值，比如：




    
	
  1. 
		<img src="test.jpg"/> 
    2. 




	2.table的系列方法：



	为了简化创建表格，HTML DOM提供了一系列的表格方法，常用几个：



	◆cells  ——返回</tr>元素中的所有单元格



	◆rows   ——表格中所有行的集合



	◆insertRow(position) ——在rows集合中指定位置插入新行



	◆deleteRow(position) ——与insertRow相反



	◆insertCell(position) ——在cells集合的指定位置插入一个新的单元格



	◆deleteCell(position) ——与insertCell相反



	遍历DOM



	DOM的遍历是DOM Level2中提出的标准，IE6没有实现，Mozilla和Safari已经实现，最新IE7不清楚是否实现。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机