码迷,mamicode.com
首页 > 其他好文 > 详细

DOM中元素节点,属性节点,文本节点的理解

时间:2017-04-16 21:24:21      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:attr   包含   int   nod   返回   string   分析   tab   重要   

节点信息

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

  • 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.   <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.   
  13.   <script>   
  14.  var d = document.getElementById("john").getAttributeNode("name");     
  15.     alert(d.nodeType)   
  16.     alert(d.nodeName)   
  17.     alert(d.nodeValue)     
  18.   </script>   
  19.  </BODY>   
  20. </HTML>  
 

  分析运行结果,其三个属性的值分别为:

nodeType:ATTRIBUTE_NODE

nodeType值:2

nodeName:属性名  // name

nodeValue:属性值  //myname

3:文本节点

  1.  <HEAD>   
  2.   <TITLE> New Document </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.getElementsByTagName("td")[0].firstChild      
  14.     alert(d.nodeType)   
  15.     alert(d.nodeName)   
  16.     alert(d.nodeValue)     
  17.   </script>   
  18.  </BODY>   
  19. </HTML>  

  分析运行结果,其三个属性的值分别为:

nodeType:TEXT_NODE

nodeType值:3

nodeName:#text

nodeValue:文本内容   // John

DOM中元素节点,属性节点,文本节点的理解

标签:attr   包含   int   nod   返回   string   分析   tab   重要   

原文地址:http://www.cnblogs.com/Joke-Jay/p/6706442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!