您的位置：首页 > 其它

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

2016-07-16 10:44 429 查看

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
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>

<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>

<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>

<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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航