zoukankan      html  css  js  c++  java

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

    节点信息

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

    • 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.   
      13. 

    13.   <script>   
      14. 

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

    15.     alert(d.nodeType)   
      16. 

    16.     alert(d.nodeName)   
      17. 

    17.     alert(d.nodeValue)     
      18. 

    18.   </script>   
      19. 

    19.  </BODY>   
      20. 

    20. </HTML>  
      21. 

    

     
    

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

    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>  
      20. 

    

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

    nodeType：TEXT_NODE
    

    nodeType值：3
    

    nodeName：#text
    

    nodeValue：文本内容   // John
    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  笨方法学python中执行argv提示ValueError: not enough values to unpack (expected 4, got 1)
                    
    VMware workstation安装
                    
    Redis  bigkey分析
                    
    MySQL  drop table 影响及过程
                    
    MySQL  大表硬连接删除
                    
    ES  elasticsearch 各种查询
                    
    ES elasticsearch  各种聚合
                    
    ES  elasticsearch 聚合统计
                    
    ES  elasticsearch 实现 count单字段，分组取前多少位，以地理位置中心进行统计
                    
    MySQL行溢出、varchar最多能存多少字符
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/Joke-Jay/p/6706442.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看