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

    节点信息

    每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
    nodeName（节点名称） 
    nodeValue（节点值） 
    nodeType（节点类型） 
    nodeType

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

    最重要的节点类型是：

    元素类型

    节点类型

    元素(ELEMENT_NODE)

    1   

    属性(ATTRIBUTE_NODE)

    2

    文本(TEXT_NODE)

    3

    注释(COMMENT_NODE)

    8

    文档(DOCUMENT_NODE)

    9

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

    1：元素节点
    元素节点代码  

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


     

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

    nodeType：ELEMENT_NODE

    nodeType值：1

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

    nodeValue：null

    2：属性节点


    属性节点代码  

     
    1. <HTML>  
    2. <HEAD>  
    3. <TITLE>空谷悠悠</TITLE>  
    4. </HEAD>  
    5. <BODY>  
    6.     <table>  
    7.         <tr>  
    8.             <td id="john" name="myname">John</td>  
    9.             <td>Doe</td>  
    10.             <td id="jack">Jack</td>  
    11.         </tr>  
    12.     </table>  
    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. <HTML>  
    2. <HEAD>  
    3. <TITLE>New Document</TITLE>  
    4. </HEAD>  
    5. <BODY>  
    6.  <table>  
    7.   <tr>  
    8.   　　 <td id="john" name="myname">John</td>  
    9.   　　 <td>Doe</td>  
    10.    　　<td id="jack">Jack</td>  
    11.   </tr>  
    12.  </table>  
    13.  <script>  
    14.   var d = document.getElementsByTagName("td")[0].firstChild  
    15.   alert(d.nodeType)  
    16.   alert(d.nodeName)  
    17.   alert(d.nodeValue)  
    18.  </script>  
    19. </BODY>  
    20. </HTML>  


     

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

    nodeType：TEXT_NODE

    nodeType值：3

    nodeName：#text

    nodeValue：文本内容   // John
  • 相关阅读:
    Xpath提取一个标签里的所有文本
    Mac Sublime Text 3
    激活pycharm
    Mac 终端命令大全
    操作dict时避免出现KeyError的几种方法
    JQ 选择器大全
    调用百度编辑器
    模拟 Ajax 上传
    图片上传
    PHP 字符串去掉空格
  • 原文地址：https://www.cnblogs.com/codebook/p/5128138.html
Copyright © 2020-2023  润新知