返回
2022年09月
-
DOM节点是什么？
在网页中所有对象和内容都被称为节点，如文档、元素、文本、属性、注释等。节点（Node）是 DOM 最基本的单元，并派生出不同类型的节点，它们共同构成了文档的树形结构模型。
节点类型
根据 DOM 规范，整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，以此类推。
DOM 支持的节点类型说明如表所示。
DOM 节点类型说明 节点类型 说明 可包含的子节点类型 Document 表示整个文档，DOM 树的根节点 Element（最多一个）、ProcessingInstruction、Comment、DocumentType DocumentFragment 表示文档片段，轻量级的 Document 对象，仅包含部分文档 ProcessingInstruction、Comment、Text、CDATASection、EntityReference DocumentType 稳文档定义的实体提供接口 None ProcessingInstruction 表示处理指令 None EntityReference 表示实体引用元素 ProcessingInstruction、Comment、Text、CDATASection、EntityReference Element 表示元素 Text、Comment、ProcessingInstruction、CDATASection、EntityReference Attr 表示属性 Text、EntityReference Text 表示元素或属性中的文本内容 None CDATASection 表示文档中的 CDATA 区段，其包含的文本不会被解析器解析 None Comment 表示注释 None Entity 表示实体 ProcessingInstruction、Comment、Text、CDATASection、EntityReference Notation 表示在 DTD 中声明的符号 None 使用 nodeType 属性可以判断一个节点的类型，取值说明如表所示。
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 示例
下面示例演示如何借助节点 nodeType 属性检索当前文档中包含元素的个数。
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>DOM</h1> <p>DOM 是<cite>Document Object Model</cite>首字母简写，中文翻译为<b>文档对象模型</b>，是<i>W3C</i>组织推荐的处理可扩展标识语言的标准编程接口。</p> <ul> <li>D 表示文档，HTML 文档结构。</li> <li>O 表示对象，文档结构的 JavaScript 脚本化映射。</li> <li>M 表示模型，脚本与结构交互的方法和行为。</li> </ul> <script> function count (n) { //定义文档元素统计函数 var num = 0; //初始化变量 if (n.nodeType == 1) //检查是否为元素节点 num ++; //如果是，则计数器加1 var son = n.childNodes; //获取所有子节点 for (var i = 0; i < son.length; i ++) { //循环统一每个子元素 num += count (son[i]); //递归操作 } return num; //返回统计值 } console.log("当前文档包含" + count (document) + "个元素"); //计算元素的总个数 </script> </body> </html>演示效果如下：
