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

JavaScript DOM特性与应用详解(1)

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

由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象。Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12）。

51CTO推荐阅读：JavaScript DOM的本质及操作方法

以下是Node的种类：



    
	
  1. 
		Node.ELEMENT_NODE (1)     
    2. 
	
  2. 
		Node.ATTRIBUTE_NODE (2)     
    3. 
	
  3. 
		Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点     
    4. 
	
  4. 
		Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode     
    5. 
	
  5. 
		Node.ENTITY_REFERENCE_NODE (5)      
    6. 
	
  6. 
		Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点     
    7. 
	
  7. 
		Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点     
    8. 
	
  8. 
		Node.COMMENT_NODE (8)     
    9. 
	
  9. 
		Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点     
    10. 
	
  10. 
		Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>     
    11. 
	
  11. 
		Node.DOCUMENT_FRAGMENT_NODE (11)     
    12. 
	
  12. 
		Node.NOTATION_NODE (12) //DTD中的Nation定义     
    13. 
	
  13. 
		 
    14. 
	
  14. 
		Node.ELEMENT_NODE (1)  
    15. 
	
  15. 
		Node.ATTRIBUTE_NODE (2)  
    16. 
	
  16. 
		Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点  
    17. 
	
  17. 
		Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode  
    18. 
	
  18. 
		Node.ENTITY_REFERENCE_NODE (5)   
    19. 
	
  19. 
		Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点  
    20. 
	
  20. 
		Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点  
    21. 
	
  21. 
		Node.COMMENT_NODE (8)  
    22. 
	
  22. 
		Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点  
    23. 
	
  23. 
		Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..> 
    24. 
	
  24. 
		Node.DOCUMENT_FRAGMENT_NODE (11)  
    25. 
	
  25. 
		Node.NOTATION_NODE (12) //DTD中的Nation定义 
    26. 




	Node接口包含的特性/方法



	◆nodeName属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text 的字符串；

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



	◆nodeType 属性将返回一个整数，这个数值代表给定节点的类型；



	◆nodeValue 属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；



	◆ownerDocument 指向这个节点所属的文档；



	◆attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点；



	◆childNodes 所有子节点的列表；



	◆firstChild 指向在childNodes列表中的第一个节点；



	◆lastChild 指向在childNodes列表中的最后一个节点；



	◆nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null；



	◆previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null；



	◆parentNode 返回一个给定节点的父节点；



	◆hasChildNodes() 当childNodes包含一个或多个节点时，返回真；



	◆appendChild(node) 将node添加到childNodes的末尾；



	◆removeChild(node) 将node从childNodes中删除；



	◆insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode。




    
	
  1. 
		var container = document.getElementById("content");     
    2. 
	
  2. 
		var message = document.getElementById("fineprint");     
    3. 
	
  3. 
		var para = document.createElement("p");     
    4. 
	
  4. 
		container.insertBefore(para,message);    
    5. 
	
  5. 
		 
    6. 
	
  6. 
		var container = document.getElementById("content");  
    7. 
	
  7. 
		var message = document.getElementById("fineprint");  
    8. 
	
  8. 
		var para = document.createElement("p");  
    9. 
	
  9. 
		container.insertBefore(para,message);    
    10. 
	
  10. 
		replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode。  
    11. 
	
  11. 
		var container = document.getElementById("content");     
    12. 
	
  12. 
		var message = document.getElementById("fineprint");     
    13. 
	
  13. 
		var para = document.createElement("p");     
    14. 
	
  14. 
		container.replaceChild(para,message);    
    15. 
	
  15. 
		 
    16. 
	
  16. 
		var container = document.getElementById("content");  
    17. 
	
  17. 
		var message = document.getElementById("fineprint");  
    18. 
	
  18. 
		var para = document.createElement("p");  
    19. 
	
  19. 
		container.replaceChild(para,message); ❑ 获得Node：  
    20. 
	
  20. 
		 
    21. 
	
  21. 
		/* 通过document对象 */    
    22. 
	
  22. 
		var oHtml = document.documentElement;     
    23. 
	
  23. 
		/* 得到<head />和<body /> */    
    24. 
	
  24. 
		var oHead = oHtml.firstChild;     
    25. 
	
  25. 
		var oBody = oHtml.lastChild;     
    26. 
	
  26. 
		/* 可以用这种方式 */    
    27. 
	
  27. 
		var oHead = oHtml.childNodes[0];     
    28. 
	
  28. 
		var oBody = oHtml.childNodes[1];     
    29. 
	
  29. 
		/* 也可以使用方法获取数组的索引值 */    
    30. 
	
  30. 
		var oHead = oHtml.childNodes.item(0);     
    31. 
	
  31. 
		var oBody = oHtml.childNodes.item(1);     
    32. 
	
  32. 
		/* 使用document.body来得到<body /> */    
    33. 
	
  33. 
		var oBody = document.body;    
    34. 
	
  34. 
		 
    35. 
	
  35. 
		/* 通过document对象 */  
    36. 
	
  36. 
		var oHtml = document.documentElement;  
    37. 
	
  37. 
		/* 得到<head />和<body /> */  
    38. 
	
  38. 
		var oHead = oHtml.firstChild;  
    39. 
	
  39. 
		var oBody = oHtml.lastChild;  
    40. 
	
  40. 
		/* 可以用这种方式 */  
    41. 
	
  41. 
		var oHead = oHtml.childNodes[0];  
    42. 
	
  42. 
		var oBody = oHtml.childNodes[1];  
    43. 
	
  43. 
		/* 也可以使用方法获取数组的索引值 */  
    44. 
	
  44. 
		var oHead = oHtml.childNodes.item(0);  
    45. 
	
  45. 
		var oBody = oHtml.childNodes.item(1);  
    46. 
	
  46. 
		/* 使用document.body来得到<body /> */  
    47. 
	
  47. 
		var oBody = document.body;❑ createElement(element) 
    48. 




	创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。




    
	
  1. 
		eg) var para = document.createElement("p");  
    2. 
	
  2. 
		document.body.appendChild(para); 
    3. 



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机