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

太过爱你忘了你带给我的痛 2021-08-13 19:26 410阅读 0赞

#### 节点的名称和值 ####

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

**节点的nodeName和nodeValue属性说明：**

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

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

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子元素。