zoukankan      html  css  js  c++  java

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

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

    节点信息

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

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

    最重要的节点类型是：

     

    元素类型

    节点类型

    元素(ELEMENT_NODE)

    1   

    属性(ATTRIBUTE_NODE)

    2

    文本(TEXT_NODE)

    3

    注释(COMMENT_NODE)

    8

    文档(DOCUMENT_NODE)

    9

     

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

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

    [html] view plaincopy
    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：属性节点


    属性节点代码  

    [html] view plaincopy
    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:文本节点


    文本节点代码  

    [html] view plaincopy
    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
  • 相关阅读:
    JavaScript 中的求值策略
    JavaScript中的reduce()的5个用例
    使用JavaScript检测空闲的浏览器选项卡，可以做些什么？
    前端优化代码
    你可能不需要在JavaScript使用switch语句
    Js中的compose函数和pipe函数
    css是什么格式的文件？
    h5和css3的新特性有哪些？
    ES2020的这些新功能令人期待
    WindowsServer2003服务器的性能监视
  • 原文地址：https://www.cnblogs.com/xiaoleidiv/p/3347483.html
Copyright © 2011-2022 走看看