JS-JavaScript节点Node的nodeName和nodeValue、节点之间的树状关系

最新推荐文章于 2024-05-04 23:00:59 发布

吴声子夜歌

最新推荐文章于 2024-05-04 23:00:59 发布

阅读量2k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript JSNode nodeName nodeValue 节点关系

本文链接：https://blog.csdn.net/cold___play/article/details/101387466

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

节点的名称和值

使用节点的nodeName和nodeValue属性可以读取节点的名称和值。这两个属性完全取决于节点的类型，具体如下表：

节点的nodeName和nodeValue属性说明：

节点类型	nodeaName返回值	nodeValue返回值
Document	#document	null
DocumentFragment	#document-fragment	null
DocumentType	doctype名称	null
EntityReference	实体引用名称	null
Element	元素的名称（或标签名称）	null
Attr	属性的名称	属性的值
ProcessingInstruction	target	节点的内容
Comment	#comment	注释的文本
Text	#text	节点的内容
CDATASection	#cdata-section	节点的内容
Entity	实体名称	null
Notation	符号名称	null

示例：检测节点类型，读取属性

var node = document.getElementsByTagName("body")[0];
if(node.nodeType == 1)
	var value = node.nodeName;
alert(value);

节点之间的关系

DOM把文档视为一种树结构，这种树结构被称为节点树JavaScript脚本可以通过这棵树访问所有节点，可以修改或删除它们的内容，也可以创建新的节点。

节点之间的关系包括：上下级的父子关系、相邻级别的兄弟关系

在节点树中，最顶端节点为根节点
除了根节点之外，每个节点都有一个父节点
节点可以包含任何数量的子节点
叶子是没有子节点的节点
同级节点是拥有相同父节点的节点

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>标准BOM</h1>
		<p>这是一份简单的<strong>文档对象模型</strong></p>
		<ul>
			<li>D表示文档，HTML文档结构</li>
			<li>O表示对象，文档结构的JavaScript脚本化映射</li>
			<li>M表示模型，脚本与结构交互的方法和行为</li>
		</ul>
	</body>
</html>

分析：
在上面的HTMl结构中，DOCTYPE文档类型声明，然后是html元素，网页所有元素都包含在这个元素里。从文档结构看，html元素既没有父辈，也没有兄弟。如果用树来表示的化，这个html元素就是树根，代表整个文档。由html元素派生出head和body两个子元素，它们属于同一级别，且互不包含，可以称之为兄弟关系。head和body元素拥有共同的父元素html，同时他们又是其他元素的父元素，但包含的子元素不同。head元素包含title元素，title元素又博阿寒文本节点“标准DOM示例”。body元素包含3个子元素：h1、p和ul，它们是兄弟关系。如果继续访问，ul元素也是一个父元素，它包含3个li子元素。

吴声子夜歌

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-JavaScript节点Node的nodeName和nodeValue、节点之间的树状关系

节点的名称和值使用节点的nodeName和nodeValue属性可以读取节点的名称和值。这两个属性完全取决于节点的类型，具体如下表：节点的nodeName和nodeValue属性说明：节点类型nodeaName返回值nodeValue返回值Document#documentnullDocumentFragment#document-fragmentnull...
复制链接

扫一扫