DOM中元素节点、属性节点、文本节点的理解-白红宇

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

阅读量：2219 次

发布时间：2019-05-08

本文共 1627 字，大约阅读时间需要 5 分钟。

节点信息

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

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>

  空谷悠悠    
   
	         		      John 		      Doe 		      Jack

分析运行结果，其三个属性的值分别为：

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>

  空谷悠悠    
   
	         		      John 		      Doe 		      Jack

分析运行结果，其三个属性的值分别为：

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>

   New Document     
   
	         		      John 		      Doe 		      Jack

分析运行结果，其三个属性的值分别为：

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容 // John

转载地址：http://ztdfb.baihongyu.com/

你可能感兴趣的文章

【数据结构】栈的简单理解以及对栈的基本操作

查看>>

【数据结构】简单不带环迷宫的实现（用栈实现）

查看>>

【C语言】简单的了解递归（求斐波那契，n的阶乘，字符串长度，把一个整型（无符号），转化为字符型并打印出来）

【数据结构】队列的基本认识和队列的基本操作

【C++】动态内存管理 new和delete的理解

【C++】STL -- Vector容器的用法

查看>>

【Linux】Linux中的0644 和 0755的权限