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
    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  HHHOJ #153. 「NOI模拟 #2」Kotomi
                    
    HHHOJ #151. 「NOI模拟 #2」Nagisa
                    
    Luogu P5298 [PKUWC2018]Minimax
                    
    Luogu P5368 [PKUSC2018]真实排名
                    
    Luogu P5408 【模板】第一类斯特林数·行
                    
    Codechef December Challenge 2019 Division 1
                    
    AtCoder Grand Contest 040
                    
    CSP2019游记（翻车记）
                    
    Codeforces Round #594 (Div. 1)
                    
    AtCoder Grand Contest 039
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/Joke-Jay/p/6706442.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看