0.背景
开发中本来用的前端组件库ng-zorro。但是一个功能用到了非常迷惑的dom操作。需要遍历一个div,内嵌了不同类型的标签,于是想到通过nodeType来取反。
这篇文章中简单记录一下JS中nodeType类型。
1.nodeType
nodeType属性是用来取反不同类型的节点,比如元素,文本,注释等。
常见的nodeType类型
常量 | 值 | 描述 |
---|---|---|
Node.ELEMENT_NODE | 1 | 一个 元素 节点,例如 <p> 和 <div>。 |
Node.TEXT_NODE | 3 | Element 或者 Attr 中实际的 文字 |
Node.PROCESSING_INSTRUCTION_NODE | 7 | 一个用于XML文档的 ProcessingInstruction ,例如 <?xml-stylesheet … ?> 声明。 |
Node.COMMENT_NODE | 8 | 一个 Comment 节点。 |
Node.DOCUMENT_NODE | 9 | 一个 Document 节点。 |
Node.DOCUMENT_TYPE_NODE | 10 | 描述文档类型的 DocumentType 节点。例如 就是用于 HTML5 的。 |
Node.DOCUMENT_FRAGMENT_NODE | 11 | 一个 DocumentFragment 节点 |
2.用法
用法1:
var p = document.createElement("p");
p.textContent="123..";
if(p.nodeType===Node.ELEMENT_NODE)
// true
用法2:
var div = document.getElementByTagName('div')
child = div.childNodes
for(var i=0; i<child.length;i++){
if(child[i].nodeType==1){
//...
}
}