DOM-使用节点
节点类型
DOM规定:整个文档是一个文档节点,每个标签是一个元素节点,元素包含的文本是文本节点,元素的属性是一个属性节点,注释属于注释节点,如此等等;
每个节点都有一个nodeType属性,用于标明节点的类型,简单说明如表,该表列出了不同的节点类型,以及他们可拥有的子节点类型。
节点类型 | 说明 | 可包含的节点类型 |
Document | 表示整个文档,DOM数的根节点 | Element(最多一个),processingInstruction、comment、docuemntType |
DocumentFagment | 表示文档片段,轻量级的Document对象,进包含部分文档 | processingInstruction、Comment、Text、CDATASection、EntityReference |
documentType | 为文档定义的尸体提供接口 | none |
processingInstruction | 表示处理命令 | none |
EntityRerence | 表示实体引用元素 | processingInstruction、comment、text、CDATASection、EntityReference |
Attr | 表示属性 | text、EntityReference |
Element | 表示元素 | text、comment、EntityReference、CDATASection、processingInstruction |
comment | 表示注释 | none |
entity | 表示实体 | processingInstruction、comment、text、CDATASection、EntityReference |
CDATASection | 表示文档中的CDATA区段,其包含的文本不会被解析器解析 | processingInstruction、comment、text、CDATASection、EntityReference |
Notation | 表示在DTD中声明的符号 | none |
使用nodeType属性返回值可以判断一个节点的类型,具体说明如下
节点类型 | nodeType | 常量名 |
Element | 1 | ELEMENT_NODE |
Attr | 2 | ATTRIBUTE_NODE |
Text | 3 | TEXT_NODE |
CDATASection | 4 | CDATA_SECTION_NODE |
EntityReference | 5 | ENTITY_REFERENCE_NODE |
Entity | 6 | ENTITY_NODE |
ProcessingInstruction | 7 | PROCESSING_INSTRUCTION_NODE |
Comment | 8 | COMMENT_NODE |
Document | 9 | DOCUMENT_NODE |
DocumentType | 10 | DOCUMENT_TYPE_NODE |
DocumentFragment | 11 | DOCUMENT_FRAGMENT_NODE |
Notation | 12 | NOTATION_NODE |
function count(n){ var num=0; if(n.nodeType==1){ //判断节点的类型是否是元素,是就累加 num++; } var s=n.childNodes; //节点下的子节点 for(var i=0;i<s.length;i++){ num+=count(s[i]); } return num; } console.log("当前文档包含"+count(document)+"元素");
在上面javascript脚本中,定义一个计数器函数,然后通过递归的方式逐层检索document下所包含的全部节点,在计数函数中在通过nodeType属性是否为1过滤
掉非元素节点,从而统计出文档中包含全部的元素个数。