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

最新推荐文章于 2022-08-23 23:50:42 发布

weixin_30750335

最新推荐文章于 2022-08-23 23:50:42 发布

阅读量51

点赞数

原文链接：http://www.cnblogs.com/xiaoleidiv/p/3347483.html

版权

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

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeType

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

最重要的节点类型是：

元素类型	节点类型
元素(ELEMENT_NODE)	1
属性(ATTRIBUTE_NODE)	2
文本(TEXT_NODE)	3
注释(COMMENT_NODE)	8
文档(DOCUMENT_NODE)	9

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

1：元素节点
元素节点代码

[html] view plain copy

<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：属性节点

属性节点代码

[html] view plain copy

<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:文本节点

文本节点代码

[html] view plain copy

<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

转载于:https://www.cnblogs.com/xiaoleidiv/p/3347483.html

weixin_30750335

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中元素节点、属性节点、文本节点的理解

DOM中元素节点、属性节点、文本节点的理解节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）nodeTypenodeType属性可返回节点的类型。最重要的节点类型是：元素类型节点类型元素(ELEMENT_NODE)1属性(ATTRIBUTE_NODE)2文本(TEXT_NOD...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。