DOM中的node(节点)有关的三个属性--nodeType、nodeName、nodeValue

痛定思痛。 2023-02-13 08:18 1阅读 0赞

## DOM中的node(节点)有关的三个属性–nodeType、nodeName、nodeValue ##

上篇博文我们讲到了如何通过DOM获取HTML文档中的元素，在这里要明白一点，当我们获取到具体的某一个元素的时候这个元素就是一个**元素节点**。说到节点，我们不可避免的有三个属性很有必要了解一下：**nodeType、nodeName、nodeValue。**

#### 1.nodeType属性 ####

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

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

**注**：以上红色部分为平时最常用的节点类型。

<div class="wrap" id="wrap">
 这是一个段落
 <ul class="list">
 <li class="item">列表01</li>
 <li>列表02</li>
 <li>列表03</li>
 <li>列表04</li>
 </ul>
 </div>

当然上面表格中是采用常量的方式来返回节点类型，接下来我们说一下怎样通过nodeType属性返回元素的类型：

var oWrap=document.getElementsByClassName("wrap")[0];
        // var oWrap=document.getElementById('wrap');
        var oText=document.getElementById("text");
        // 通过节点 获取元素 node.get。。。。
        // var oText=oWrap.getElementsByClassName("text");
        var oList=document.getElementsByClassName("list");
        console.log(oWrap);
        console.log(oText);
        console.log(oList);
        // 1.节点分类 nodeType 返回节点类型 1(元素节点) 3(文本节点) 2(属性节点) 8(注释节点) 9(document)
        console.log(oWrap.nodeType);//1 当获取的是HTML集合时 返回undefined
        console.log(oText.nodeType);//1
        console.log(oList.nodeType);//1
    
        var textNode=oText.firstChild;
        console.log(textNode.nodeType);//3 文本节点
    
        var attrNode=oText.getAttributeNode("id");
        console.log(attrNode.nodeType);//2 属性节点
    
        console.log(document.nodeType);//9

**注**：使用nodeType属性时一定要确保获取到的是节点而不是节点对应的值。

#### 2.nodeName属性 ####

返回节点的名称。

// 元素节点返回 大写的标签名
        console.log(oWrap.nodeName);//DIV 
        console.log(oText.nodeName);//P
        console.log(oList[0].nodeName);//UL 
    
        // 属性节点 返回 属性名
        console.log(attrNode.nodeName);//id
    
        // 文本节点 返回 #text
        var oItem=document.getElementsByClassName("item")[0];
        var itemText=oItem.firstChild;
        console.log(textNode.nodeName);//#text
        console.log(itemText.nodeName);//#text

#### 3.nodeValue属性 ####

返回节点的值。

// 元素节点 返回null
        console.log(oWrap.nodeValue);//
        console.log(oText.nodeValue);
        console.log(oList[0].nodeValue);
    
        // 属性节点 返回属性值
        console.log(attrNode.nodeValue);//text
    
        // 文本节点 返回文本内容
        console.log(textNode.nodeValue);//这是一个段落

\*\*注意：\*\*以上三个属性经常会被初学者忽略掉，但是实际应用中所有的浏览器都支持这些属性，可以用来当作判断条件使用。

**视频讲解链接：  
https://www.bilibili.com/video/BV17t4y1C745/**