zoukankan      html  css  js  c++  java
  • DOM中元素节点、属性节点、文本节点的理解

    转自:http://www.cnblogs.com/dh616854836/archive/2011/08/14/2138038.html

    节点信息

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

    • nodeName(节点名称)
    • nodeValue(节点值)
    • nodeType(节点类型)

    nodeType

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

    最重要的节点类型是:

    元素类型节点类型
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

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

    1:元素节点

    <HEAD>   
      <TITLE>空谷悠悠</TITLE>   
     </HEAD>   
     <BODY>   
      <table>   
        <tr>   
            <td id="john" name="myname">John</td>   
            <td>Doe</td>   
            <td id="jack">Jack</td>   
        </tr>   
      </table>   
      <script>   
     var d = document.getElementById("john");      
        alert(d.nodeType)   
        alert(d.nodeName)   
        alert(d.nodeValue)     
      </script>   
     </BODY>   
    </HTML>  

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

    nodeType:ELEMENT_NODE

    nodeType值:1

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

    nodeValue:null

    2:属性节点

    <HEAD>   
      <TITLE>空谷悠悠</TITLE>   
     </HEAD>   
     <BODY>   
      <table>   
        <tr>   
            <td id="john" name="myname">John</td>   
            <td>Doe</td>   
            <td id="jack">Jack</td>   
        </tr>   
      </table>   
      
      <script>   
     var d = document.getElementById("john").getAttributeNode("name");     
        alert(d.nodeType)   
        alert(d.nodeName)   
        alert(d.nodeValue)     
      </script>   
     </BODY>   
    </HTML>  

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

    nodeType:ATTRIBUTE_NODE

    nodeType值:2

    nodeName:属性名  // name

    nodeValue:属性值  //myname

    3:文本节点

    <HEAD>   
      <TITLE> New Document </TITLE>   
     </HEAD>   
     <BODY>   
      <table>   
        <tr>   
            <td id="john" name="myname">John</td>   
            <td>Doe</td>   
            <td id="jack">Jack</td>   
        </tr>   
      </table>   
      <script>   
        var d = document.getElementsByTagName("td")[0].firstChild      
        alert(d.nodeType)   
        alert(d.nodeName)   
        alert(d.nodeValue)     
      </script>   
     </BODY>   
    </HTML>  

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

    nodeType:TEXT_NODE

    nodeType值:3

    nodeName:#text

    nodeValue:文本内容   // John

  • 相关阅读:
    BZOJ 1269 文本编辑器editor(伸展树)
    NOI 2017 整数(线段树)
    HAOI 2018 染色(容斥+NTT)
    HDU 5279 YJC plays Minecraft(NTT+分治)
    HDU 6088 Rikka with Rock-paper-scissors(NTT+欧拉函数)
    HDU 5552 Bus Routes(NTT+分治)
    HDU 4656 Evaluation(MTT)
    HDU 5829 Rikka with Subset(NTT)
    HDU 6061 RXD and functions(NTT)
    JOISC 2014 邮戳拉力赛(DP)
  • 原文地址:https://www.cnblogs.com/gavin-num1/p/4978893.html
Copyright © 2011-2022 走看看