理解Node类型——不应被忽视的 nodeType、nodeName、nodeValue

小咪咪 2022-05-25 03:49 280阅读 0赞

#### Node 类型 ####

--------------------

DOM1级定义了 `Node` 接口，该接口将由 DOM 中的所有节点类型实现。这个 `Node` 接口在 JavaScript 中是作为 Node 类型实现的；除了 IE 之外，在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 `Node` 类型，因此所有节点类型都共享着相同的基本属性和方法。  
  这篇讲讲 `Node` 类型常会被忽视的三个属性：**nodeType**、**nodeName**、**nodeValue**。

#### nodeType 属性 ####

--------------------

每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 `Node` 类型中定义12个常量表示：

<table> 
 <thead> 
 <tr> 
 <th align="left">常量名</th> 
 <th align="center">常量值</th> 
 <th align="left">节点类型</th> 
 <th align="left">描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td align="left">Node.ELEMENT_NODE</td> 
 <td align="center">1</td> 
 <td align="left">Element</td> 
 <td align="left">代表元素</td> 
 </tr> 
 <tr> 
 <td align="left">Node.ATTRIBUTE_NODE</td> 
 <td align="center">2</td> 
 <td align="left">Attr</td> 
 <td align="left">代表属性</td> 
 </tr> 
 <tr> 
 <td align="left">Node.TEXT_NODE</td> 
 <td align="center">3</td> 
 <td align="left">Text</td> 
 <td align="left">代表元素或属性中的文本内容</td> 
 </tr> 
 <tr> 
 <td align="left">Node.CDATA_SECTION_NODE</td> 
 <td align="center">4</td> 
 <td align="left">CDATASection</td> 
 <td align="left">代表文档中的 CDATA 部（不会由解析器解析的文本）</td> 
 </tr> 
 <tr> 
 <td align="left">Node.ENTITY_REFERENCE_NODE</td> 
 <td align="center">5</td> 
 <td align="left">EntityReference</td> 
 <td align="left">代表实体引用</td> 
 </tr> 
 <tr> 
 <td align="left">Node.ENTITY_NODE</td> 
 <td align="center">6</td> 
 <td align="left">Entity</td> 
 <td align="left">代表实体</td> 
 </tr> 
 <tr> 
 <td align="left">Node.PROCESSING_INSTRUCTION_NODE</td> 
 <td align="center">7</td> 
 <td align="left">ProcessingInstruction</td> 
 <td align="left">代表处理指令</td> 
 </tr> 
 <tr> 
 <td align="left">Node.COMMENT_NODE</td> 
 <td align="center">8</td> 
 <td align="left">Comment</td> 
 <td align="left">代表注释</td> 
 </tr> 
 <tr> 
 <td align="left">Node.DOCUMENT_NODE</td> 
 <td align="center">9</td> 
 <td align="left">Document</td> 
 <td align="left">代表整个文档（DOM 树的根节点）</td> 
 </tr> 
 <tr> 
 <td align="left">Node.DOCUMENT_TYPE_NODE</td> 
 <td align="center">10</td> 
 <td align="left">DocumentType</td> 
 <td align="left">向为文档定义的实体提供接口</td> 
 </tr> 
 <tr> 
 <td align="left">Node.DOCUMENT_FRAGMENT_NODE</td> 
 <td align="center">11</td> 
 <td align="left">DocumentFragment</td> 
 <td align="left">代表轻量级的 Document 对象（文档的某个部分）</td> 
 </tr> 
 <tr> 
 <td align="left">Node.NOTATION_NODE</td> 
 <td align="center">12</td> 
 <td align="left">Notation</td> 
 <td align="left">代表 DTD 中声明的符号</td> 
 </tr> 
 </tbody> 
</table>

**注：红色加粗为常用的节点类型**

来看下面这个例子，看如何去 `Node` 类型节点，以及它 `NodeType` 属性。

> ps: 可以直接复制出去运行

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 </head>
 <body>
 
 <div id="box">hello nodeType~</div>
 
 <script type="text/javascript">
 	var element = document.getElementById("box");
 	var attr = document.getElementById("box").getAttributeNode("id");
 	var text = document.getElementById("box").firstChild;
 
 	console.log(element.nodeType); //1
 	console.log(attr.nodeType); //2
 	console.log(text.nodeType); //3
 </script>
 </body>
 </html>

#### nodeName 属性与 nodeValue 属性 ####

--------------------

要了解节点的具体信息，可以使用 nodeName 和 nodeValue 这两个属性。这两个属性的值完全取决于节点的类型。

一般来说：

*  元素节点的 `nodeName` 是标签名称（大写）
 *  属性节点的 `nodeName` 是属性名称
 *  文本节点的 `nodeName` 永远是 `#text`
 *  文档节点的 `nodeName` 永远是 `#document`

这里可以改下上面的例子，打印这样的：

console.log(document.nodeName)    //#document
    	console.log(element.nodeName);    //DIV
    	console.log(attr.nodeName);       //id
    	console.log(text.nodeName);       //#text

*  对于文本节点，`nodeValue` 属性包含文本。
 *  对于属性节点，`nodeValue` 属性包含属性值。
 *  文档节点和元素节点，`nodeValue` 属性的值始终为 `null`。

console.log(document.nodeValue)    //null
    	console.log(element.nodeValue);    //null
    	console.log(attr.nodeValue);       //box
    	console.log(text.nodeValue);       //hello nodeType~