JS--JavaScript节点Node概述、节点类型、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>

在这里插入图片描述
JS--JavaScript节点Node概述、节点类型、nodeType详解_第1张图片

你可能感兴趣的:(JavaScript,JavaScript,JSNODE,节点类型,nodeType)