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

Anita-Sun

于 2021-04-23 14:37:28 发布

阅读量185

点赞数

分类专栏： jQuery源码分析

本文链接：https://blog.youkuaiyun.com/AnitaSun/article/details/116055314

版权

jQuery源码分析专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了HTML中的节点类型，包括元素结点、属性结点和文本结点，详细解析了nodeName、nodeValue和nodeType等关键属性，并通过实例展示了如何获取和使用这些属性。通过对结点类型的理解和应用，有助于提升网页开发和DOM操作的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

nodeName 结点名称
nodeValue 结点值
nodeType 结点类型

元素结点

<HTML>  
<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)  // 1
        alert(d.nodeName)  // td
        alert(d.nodeValue) // null
    </script>  
</BODY>  
</HTML>

属性结点

<HTML>  
<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)   // 2
        alert(d.nodeName)   // name
        alert(d.nodeValue)  // myname
    </script>  
</BODY>  
</HTML>

文本结点

<HTML>  
<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)   // 3
  alert(d.nodeName)   // #text
  alert(d.nodeValue)  // John
 </script>  
</BODY>  
</HTML>