JS--JavaScript节点Node概述、节点类型、nodeType详解

最新推荐文章于 2021-07-02 10:18:05 发布

原创最新推荐文章于 2021-07-02 10:18:05 发布 · 2.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JSNODE #节点类型 #nodeType

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文深入解析了DOM（文档对象模型）中的各种节点类型，包括文档节点、元素节点、文本节点等，并介绍了如何通过nodeType属性判断节点类型。此外，还提供了一个示例，展示如何统计文档中的元素节点数量。

节点Node概述

DOM 1.0定义了Node接口，该接口为DOM的所有节点类型定义了原始类型。JavaScript实现了这个接口，定义所有节点类型必须继承Node类型。作为Node的子类或孙类，都拥有Node的基本属性和方法。

节点类型

DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等待。

每个节点都有一个nodeType属性，用于表明节点的类型，如下表：

DOM节点类型说明：

节点类型	说明	可包含的子节点
Document	表示整个文档，DOM树的根节点	Element（最多一个）、ProcessinInstruction、Comment、DocumentType
DocumentFragment	表示文档片段，轻量级的Document对象，仅包含部分文档	ProcessingInstruction、Comment、Text、CSATASection、EntityReference
DocumentType	为文档定义的实体提供接口	None
ProcessingInstruction	表示处理指令	None
EntityReference	表示实体引用元素	ProcessingInstruction、Comment、Text、CDATASection、EntityReference
Element	表示元素	Text、Comment
Attr	表示属性	Text、EntityReference
Text	表示元素或属性中的文本内容	None
CDATASection	表示文档中的CDATA区段，其包含的文本不会被解析器解析	None
Comment	表示注解	Nono
Entity	表示实体	ProcessingInstruction、Comment、Text、CDATASection、EntityReference
Notation	表示在DTD中声明的符号	None

使用nodeType属性返回值可以判断一个节点的类型：

节点类型	nodeType返回值	常量名
Element	1	ELEMENT_NODE
Attr	2	ATTRIBUTE_NODE
Text	3	TEXT_NODE
CDATASection	4	CDATA_SECTION_NODE
EntityReference	5	ENTITY_REFERENCE_NODE
Entity	6	ENTITY_NODE
ProcessingInstruction	7	PROCESSING_INSTRUCTION_NODE
Comment	8	COMMENT_NODE
Document	9	DOCUMENT_NODE
DocumentType	10	DOCUMENT_TYPE_NODE
DocumentFragment	11	DOCUMENT_FRAGMENT_NODE
Notation	12	NOTATION_NODE

示例：使用节点的nodeType属性检索当前文档中包含元素的个数：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>DOM</h1>
		<p>DOM是<cite>Document Object Model</cite>首字母简写，中文翻译为<b>文档对象模型</b>，是<i>W3C</i>组织推荐的处理可扩展标识语言的标准编程接口。</p>
		<ul>
			<li>D表示文档，HTML文档结构</li>
			<li>O表示对象，文档结构的JavaScript脚本化映射</li>
			<li>M表示模型，脚本与结构交互的方法和行为</li>
		</ul>
		<script>
			function count(n){
				var num = 0;
				if(n.nodeType == 1)//检查是否为元素节点
					num++;
				var son = n.childNodes;//获取所有子节点
				for(var i = 0; i < son.length; i++){
					num += count(son[i]); //递归统计
				}
				return num;
			}
			alert("当前文档包含：" + count(document) + " 个元素");
		</script>
	</body>
</html>