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

电玩女神 2021-08-13 23:38 925阅读 0赞

#### 节点Node概述 ####

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

#### 节点类型 ####

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

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

**DOM节点类型说明：**

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

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

<table> 
 <thead> 
  <tr> 
   <th align="center">节点类型</th> 
   <th align="center">nodeType返回值</th> 
   <th align="center">常量名</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">Element</td> 
   <td align="center">1</td> 
   <td align="center">ELEMENT_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">Attr</td> 
   <td align="center">2</td> 
   <td align="center">ATTRIBUTE_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">Text</td> 
   <td align="center">3</td> 
   <td align="center">TEXT_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">CDATASection</td> 
   <td align="center">4</td> 
   <td align="center">CDATA_SECTION_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">EntityReference</td> 
   <td align="center">5</td> 
   <td align="center">ENTITY_REFERENCE_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">Entity</td> 
   <td align="center">6</td> 
   <td align="center">ENTITY_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">ProcessingInstruction</td> 
   <td align="center">7</td> 
   <td align="center">PROCESSING_INSTRUCTION_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">Comment</td> 
   <td align="center">8</td> 
   <td align="center">COMMENT_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">Document</td> 
   <td align="center">9</td> 
   <td align="center">DOCUMENT_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">DocumentType</td> 
   <td align="center">10</td> 
   <td align="center">DOCUMENT_TYPE_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">DocumentFragment</td> 
   <td align="center">11</td> 
   <td align="center">DOCUMENT_FRAGMENT_NODE</td> 
  </tr> 
  <tr> 
   <td align="center">Notation</td> 
   <td align="center">12</td> 
   <td align="center">NOTATION_NODE</td> 
  </tr> 
 </tbody> 
</table>

示例：使用节点的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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190925204034412.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/dea5700bdb6c42e7b4a7b9f472201222.png
[20190925204034412.png]: /images/20210813/03216e4f25134fd1b3a7ecc5eb25509f.png