• 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

  • 相关阅读:
    DBS-Oracle:表的连接查询
    权益保护-产权保护-申请:如何撰写专利申请所需材料
    权益保护-产权保护:软件著作权
    权益保护-产权保护:专利申请
    Code-C#:手机号码验证
    软件-数据库-数据库管理工具-Navicat:百科
    WCF:目录
    WCF:百科
    ASP.NET Core-组件-后台任务:Hangfire
    ASP.NET Core-组件:目录
  • 原文地址:https://www.cnblogs.com/gavin-num1/p/4978893.html
Copyright © 2020-2023  润新知