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

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

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

对于JavaScript DOM，首先需要理解的一点是，DOM是针对XML的基于树的API，它的实现有很多（各语言基本都有自己的实现），文章将讨论的是JavaScript中或者说xhtml(html)对DOM的实现。

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

使用DOM

考虑一个html文件：



    
	
  1. 
		<html> 
    2. 
	
  2. 
		<head><title>测试</title></head> 
    3. 
	
  3. 
		<body> 
    4. 
	
  4. 
		<p>测试</p> 
    5. 
	
  5. 
		</body> 
    6. 
	
  6. 
		</html> 
    7. 




	1.访问节点



	◆访问html元素：var oHtml=document.documentElement;



	◆获取head元素：var oHead=oHtml.firstChild;



	◆获取body元素：var oBody=oHtml.lastChild; 或者 var oBody=document.body;



	也可以通过childNodes来做同样的工作：

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




    
	
  1. 
		var oHead=oHtml.childNodes[0] 或者 oHtml.childNodes.item(0);  
    2. 
	
  2. 
		var oBody=oHtml.childNodes[1] 或者 oHtml.childNodes.item(1); 
    3. 




	判断节点间关系：




    
	
  1. 
		alert(oHead.parentNode==oHtml);    
    2. 
	
  2. 
		alert(oBody.previousSibling==oHead);  
    3. 
	
  3. 
		alert(oHead.nextSibling==oBody);  
    4. 
	
  4. 
		alert(oHead.ownerDocument==document); 
    5. 




	2.检测节点类型



	通过节点的nodeType属性来检验节点类型：




    
	
  1. 
		alert(document.nodeType);  //输出9 
    2. 




	需要注意的是，DOM兼容的浏览器（以FF2.0为例），拥有Node.DOCUMENT_NODE、Node.ELEMENT_NODE等常量。各常量名称与数值对照表如下：




    
	
  1. 
		ELEMENT_NODE                                 1  
    2. 
	
  2. 
		ATTRIBUTE_NODE                            2  
    3. 
	
  3. 
		TEXT_NODE                                         3  
    4. 
	
  4. 
		CDATA_SECTION_NODE                 4  
    5. 
	
  5. 
		ENTITY_REFERENCE_NODE            5  
    6. 
	
  6. 
		ENTITY_NODE                                     6  
    7. 
	
  7. 
		PROCESSING_INSTRCTION_NODE       7  
    8. 
	
  8. 
		COMMENT_NODE                              8  
    9. 
	
  9. 
		DOCUMENT_NODE                            9  
    10. 
	
  10. 
		DOCUMENT_TYPE_NODE               10  
    11. 
	
  11. 
		DOCUMENT_FRAGMENT_NODE   11  
    12. 
	
  12. 
		NOTATION_NODE                              12  
    13. 
	
  13. 
		 
    14. 




	IE6不支持，不过你可以自定义一个JavaScript对象Node。

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



	3.处理特性



	处理特性可以使用标准的NameNodeMap中的方法：




    
	
  1. 
		getNamedItem(name) removeNamedItem(name)  setNamedItem(node)    item(pos) 
    2. 




	比如:<p id="test">测试</p>，假设变量oP是上面的p节点的引用，我们要访问oP的id属性:




    
	
  1. 
		var sId=oP.attributes.getNamedItem("id").nodeValue; 
    2. 




	这些方法用起来很累赘,所以DOM又定义了三个方法来简化:




    
	
  1. 
		getAttribute(name)         ——返回名称为name的属性的值  
    2. 
	
  2. 
		setAttribute(name,value)   ——顾名思义  
    3. 
	
  3. 
		removeAttribute(name)      ——顾名思义  
    4. 




	上面的例子可以改写为：




    
	
  1. 
		var sId=oP.getAttribute("name"); 
    2. 




	4.访问指定节点



	熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三个方法，不再展开。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机