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

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

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

在DOM（文档对象模型）中，HTML文档的层次结构被表示为树形结构，HTML文档的树形表示主要包含表示元素或标记的节点和标识文本串的节点构成。在JavaScript DOM中，Node常常被翻译成节点，下面我们通过实例，来了解一下Node的属性及方法。

51CTO推荐阅读：深入解读JavaScript中BOM和DOM
广州网站建设,网站建设,广州网页设计,广州网站设计

Node的属性介绍：



    
	
  1. 
		nodeType：显示节点的类型  
    2. 
	
  2. 
		nodeName：显示节点的名称  
    3. 
	
  3. 
		nodeValue：显示节点的值  
    4. 
	
  4. 
		attributes：获取一个属性节点  
    5. 
	
  5. 
		firstChild：表示某一节点的第一个节点  
    6. 
	
  6. 
		lastChild：表示某一节点的最后一个子节点  
    7. 
	
  7. 
		childNodes：表示所在节点的所有子节点  
    8. 
	
  8. 
		parentNode：表示所在节点的父节点  
    9. 
	
  9. 
		nextSibling：紧挨着当前节点的下一个节点  
    10. 
	
  10. 
		previousSibling：紧挨着当前节点的上一个节点 
    11. 




	Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：



	名称：元素节点



	◆nodeType：ELEMENT_NODE



	◆nodeType值：1



	◆nodeName：元素标记名



	◆nodeValue：null




    
	
  1. 
		<body> 
    2. 
	
  2. 
		<div id = "t" ><span></span></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var d = document.getElementById("t");  
    6. 
	
  6. 
		document.write(d.nodeType);  
    7. 
	
  7. 
		document.write(d.nodeName);  
    8. 
	
  8. 
		document.write(d.nodeValue);  
    9. 
	
  9. 
		//显示 1 DIV null  
    10. 
	
  10. 
		</script> 
    11. 




	名称：属性节点



	◆nodeType：ATTRIBUTE_NODE



	◆nodeType值：2



	◆nodeName：属性名



	◆nodeValue：属性值




    
	
  1. 
		<body> 
    2. 
	
  2. 
		<div id = "t" name="aaa"><span></span></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var d = document.getElementById("t").getAttributeNode("name");  
    6. 
	
  6. 
		document.write(d.nodeType);  
    7. 
	
  7. 
		document.write(d.nodeName);  
    8. 
	
  8. 
		document.write(d.nodeValue);  
    9. 
	
  9. 
		//显示 2 name aaa  
    10. 
	
  10. 
		</script> 
    11. 




	名称：文本节点



	◆nodeType：TEXT_NODE



	◆nodeType值：3



	◆nodeName：#text



	◆nodeValue：文本内容




    
	
  1. 
		<body> 
    2. 
	
  2. 
		<div id = "t">bbb</div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var d = document.getElementById("t").firstChild;  
    6. 
	
  6. 
		document.write(d.nodeType);  
    7. 
	
  7. 
		document.write(d.nodeName);  
    8. 
	
  8. 
		document.write(d.nodeValue);  
    9. 
	
  9. 
		//显示 3 #text bbb  
    10. 
	
  10. 
		</script> 
    11. 




	名称：CDATA文本节点（XML中传递文本的格式）

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



	◆nodeType：CDATA_SECTION_NODE



	◆nodeType值：4



	◆nodeName：#cdata-section



	◆nodeValue：CDATA文本内容



	attributes属性，直接获取一个属性节点，注意这里要使用[]，保持IE和FF的兼容性。




    
	
  1. 
		<body name="ddd"> 
    2. 
	
  2. 
		<div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
    3. 
	
  3. 
		</body> 
    4. 
	
  4. 
		<script> 
    5. 
	
  5. 
		var d = document.getElementById("t").attributes["name"];  
    6. 
	
  6. 
		document.write(d.name);  
    7. 
	
  7. 
		document.write(d.value);  
    8. 
	
  8. 
		//显示 name aaa  
    9. 
	
  9. 
		</script> 
    10. 




	firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：




    
	
  1. 
		<body> 
    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");  
    6. 
	
  6. 
		document.write(d.firstChild.innerHTML);  
    7. 
	
  7. 
		document.write(d.lastChild.innerHTML);  
    8. 
	
  8. 
		//显示 aaa ccc  
    9. 
	
  9. 
		</script> 
    10. 




	childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：




    
	
  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");  
    6. 
	
  6. 
		document.write(d.childNodes[1].innerHTML);  
    7. 
	
  7. 
		document.write(d.parentNode.getAttribute("name"));  
    8. 
	
  8. 
		//显示 bbb ddd  
    9. 
	
  9. 
		</script> 
    10. 




	nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：




    
	
  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").childNodes[1];  
    6. 
	
  6. 
		document.write(d.nextSibling.innerHTML);  
    7. 
	
  7. 
		document.write(d.previousSibling.innerHTML);  
    8. 
	
  8. 
		//显示 ccc aaa  
    9. 
	
  9. 
		</script> 
    10. 




	 


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机