节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

  • nodeName（节点名称）
  • nodeValue（节点值）
  • nodeType（节点类型）

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

在实际应用中，经常用到的就是元素节点、属性节点和文本节点了，下面我们通过小段代码进行讲解

1：元素节点

  1. <HEAD>
  2. <TITLE>空谷悠悠</TITLE>
  3. </HEAD>
  4. <BODY>
  5. <table>
  6. <tr>
  7. <td id="john" name="myname">John</td>
  8. <td>Doe</td>
  9. <td id="jack">Jack</td>
  10. </tr>
  11. </table>
  12. <script>
  13. var d = document.getElementById("john");
  14. alert(d.nodeType)
  15. alert(d.nodeName)
  16. alert(d.nodeValue)
  17. </script>
  18. </BODY>
  19. </HTML>


分析运行结果，其三个属性的值分别为：


nodeType：ELEMENT_NODE


nodeType值：1


nodeName：元素标记名    //此处为TD


nodeValue：null


2：属性节点




  1. <HEAD>
    2. 

  2. <TITLE>空谷悠悠</TITLE>
    3. 

  3. </HEAD>
    4. 

  4. <BODY>
    5. 

  5. <table>
    6. 

  6. <tr>
    7. 

  7. <td id="john" name="myname">John</td>
    8. 

  8. <td>Doe</td>
    9. 

  9. <td id="jack">Jack</td>
    10. 

  10. </tr>
    11. 

  11. </table>
    12. 

  12. <script>
    13. 

  13. var d = document.getElementById("john").getAttributeNode("name");
    14. 

  14. alert(d.nodeType)
    15. 

  15. alert(d.nodeName)
    16. 

  16. alert(d.nodeValue)
    17. 

  17. </script>
    18. 

  18. </BODY>
    19. 

  19. </HTML>




 


分析运行结果，其三个属性的值分别为：


nodeType：ATTRIBUTE_NODE


nodeType值：2


nodeName：属性名  // name


nodeValue：属性值  //myname


3:文本节点




  1. <HEAD>
    2. 

  2. <TITLE> New Document </TITLE>
    3. 

  3. </HEAD>
    4. 

  4. <BODY>
    5. 

  5. <table>
    6. 

  6. <tr>
    7. 

  7. <td id="john" name="myname">John</td>
    8. 

  8. <td>Doe</td>
    9. 

  9. <td id="jack">Jack</td>
    10. 

  10. </tr>
    11. 

  11. </table>
    12. 

  12. <script>
    13. 

  13. var d = document.getElementsByTagName("td")[0].firstChild
    14. 

  14. alert(d.nodeType)
    15. 

  15. alert(d.nodeName)
    16. 

  16. alert(d.nodeValue)
    17. 

  17. </script>
    18. 

  18. </BODY>
    19. 

  19. </HTML>




分析运行结果，其三个属性的值分别为：


nodeType：TEXT_NODE


nodeType值：3


nodeName：#text


nodeValue：文本内容   // John
												


											
DOM中元素节点，属性节点，文本节点的理解的更多相关文章
	

    
						
  1. DOM中元素节点、属性节点、文本节点
		
    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...
    
		
    2. 
						
  2. DOM中元素节点、属性节点、文本节点的理解
		
    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...
    
		
    3. 
								
  3. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
		
    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
    
		
    4. 
						
  4. [转]XML中元素（Element）与节点（Node）的区别
		
    前言: element是特殊的node 一段纯文本即text-node也是node 但不是element w3c的原话是 A node can be an element node, an attri ...
    
		
    5. 
						
  5. contents()  查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
		
    contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容   示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...
    
		
    6. 
						
  6. windows phone xaml文件中元素及属性(10)
		
    原文:windows phone xaml文件中元素及属性(10) Textblock xaml文件和隐藏文件 在设计界面的时候我们可以通过xaml中进行设计,这种设计是所见即所得的,很是方便,由于x ...
    
		
    7. 
						
  7. php的form中元素name属性相同时的取值问题
		
    php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...
    
		
    8. 
						
  8. DOM中元素节点、属性节点、文本节点的理解13.3
		
    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...
    
		
    9. 
						
  9. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
		
    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. TI C66x DSP 系统events及其应用 - 5.6（INTMUX）
			
    系统event 0~127(包含了eventCombiner的输出event 0~3)与CPU支持的12个可屏蔽中断是通过INTMUX寄存器进行映射的(不包含NMI.RESET).能够选择将系统eve ...
    
			
    2. 
						
  2. JS清除选择内容的方法
			
    本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中 ...
    
			
    3. 
						
  3. bzoj1081: [SCOI2005]超级格雷码(dfs)
			
    1081: [SCOI2005]超级格雷码 题目:传送门 题解: 又是一道水题... 因为之前做过所以知道规律: 如n=2 B=3: 00 10 20    21 11 01    02 12 22  ...
    
			
    4. 
						
  4. 循环神经网络(RNN, Recurrent Neural Networks)——无非引入了环，解决时间序列问题
			
    摘自:http://blog.csdn.net/heyongluoyao8/article/details/48636251 不同于传统的FNNs(Feed-forward Neural Networ ...
    
			
    5. 
						
  5. Java IO-InputStream家族 -装饰者模式
			
    最近看到一篇文章,初步介绍java.io.InputStream,写的非常通俗易懂,在这里我完全粘贴下来. 来源于 https://mp.weixin.qq.com/s/hDJs6iG_YPww7ye ...
    
			
    6. 
						
  6. 几道leetcode不会做的题目
			
    1.set没有back()函数,今天想到用这个,才发现没有. 2. tuple的initialize_list construct好像不能使用,其实之前没使用过tuple,都是pair,复杂一点的自己 ...
    
			
    7. 
						
  7. QlikSense系列(4)——QlikSense管理
			
    QlikSense管理主要通过QMC界面,在安装成功后,首先需要导入用户,QlikSense本身不能创建和验证用户,只能借助第三方系统, 笔者只使用过Windows账户和AD域用户: 1.Window ...
    
			
    8. 
						
  8. 通过Hibernate实现添加功能
			
    package com.demo.dao; import org.hibernate.Session; import org.hibernate.SessionFactory; import org. ...
    
			
    9. 
						
  9. 推荐使用sublime text 3 以及常用快捷键
			
    vim这种上古神器,需要学习.记忆.折腾.比如我的初衷是要开发php的,连php都没专研透,哪有精力去折腾vim这玩意. 当然,vim绝技练成以后,配置成各种IDE都不是问题,还有你手速会飞起来. 但 ...
    
			
    10. 
						
  10. 图像压缩Vs.压缩感知
			
    压缩感知科普文两则: 原文链接:http://www.cvchina.info/2010/06/08/compressed-sensing-2/ 这几天由于happyharry的辛勤劳动,大伙纷纷表示 ...
    
			
    11.