DOM中的node(节点)有关的三个属性–nodeType、nodeName、nodeValue
上篇博文我们讲到了如何通过DOM获取HTML文档中的元素,在这里要明白一点,当我们获取到具体的某一个元素的时候这个元素就是一个元素节点。说到节点,我们不可避免的有三个属性很有必要了解一下:nodeType、nodeName、nodeValue。
1.nodeType属性
每个节点都有一个 nodeType 属性,用于表明节点的类型,节点类型由 Node 类型中定义12个常量表示:
常量名 | 常量(返回)值 | 节点类型 | 描述 |
Node.ELEMENT_NODE | 1 | Element | 代表元素 |
Node.ATTRIBUTE_NODE | 2 | Attr | 代表属性 |
Node.TEXT_NODE | 3 | Text | 代表元素或属性中的文本内容 |
Node.CDATA_SECTION_NODE | 4 | CDATASection | 代表文档中的 CDATA 部(不会由解析器解析的文本) |
Node.ENTITY_REFERENCE_NODE | 5 | EntityReference | 代表实体引用 |
Node.ENTITY_NODE | 6 | Entity | 代表实体 |
Node.PROCESSING_INSTRUCTION_NODE | 7 | ProcessingInstruction | 代表处理指令 |
Node.COMMENT_NODE | 8 | Comment | 代表注释 |
Node.DOCUMENT_NODE | 9 | Document | 代表整个文档(DOM 树的根节点) |
Node.DOCUMENT_TYPE_NODE | 10 | DocumentType | 向为文档定义的实体提供接口 |
Node.DOCUMENT_FRAGMENT_NODE | 11 | DocumentFragment | 代表轻量级的 Document 对象(文档的某个部分) |
Node.NOTATION_NODE | 12 | Notation | 代表 DTD 中声明的符号 |
注:以上红色部分为平时最常用的节点类型。
<divclass="wrap"id="wrap"><pid="text"class="text">这是一个段落</p><ulclass="list"><liclass="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属性
返回节点的名称。
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
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);//这是一个段落
**注意:**以上三个属性经常会被初学者忽略掉,但是实际应用中所有的浏览器都支持这些属性,可以用来当作判断条件使用。