前言
最近在看B站视频分析Vue源码,其中在分析解析器的时候看到一个方法,是判断在 new Vue()时 传入的 el 参数是否是节点信息的方法, 这个方法涉及到判断当前出入的参数 nodeType类型 。之前也没关注这块内容,基于此做下记录。
定义和用法
nodeType 属性返回节点类型。通常使用的 node.nodeType 来获取节点类型。常见的节点类型如下:
-
如果节点是一个元素节点,nodeType 属性返回 1。
-
如果节点是属性节点, nodeType 属性返回 2。
-
如果节点是一个文本节点,nodeType 属性返回 3。
-
如果节点是一个注释节点,nodeType 属性返回 8。
该属性是只读的。
节点类型总结
一个HTML或XML文档的文件,元素,属性等有不同的节点类型。
有12种不同的节点类型,不同的节点类型也可以有不同的子节点类型:
| 节点类型 | 节点 | 描述 | 子节点 | nodeName返回值 | nodeValue返回值 | Named Constant(静态变量名) | |
|---|---|---|---|---|---|---|---|
| 1 | Element | 一个元素 | Element, Text, Comment, ProcessingInstruction, CDATASection, Entity参考手册 | 元素名 | null | ELEMENT_NODE | |
| 2 | Attr | 一个属性 | Text, Entity参考手册 | 属性名 | 属性值 | ATTRIBUTE_NODE | |
| 3 | Text | 一个元素的文本内容 或属性 | None | TEXT_NODE | CDATA_SECTION_NODE | ||
| 4 | CDATASection | 一个文档的CDATA部分(文本将不会被解析器解析) | None | #text | 节点内容 | CDATA_SECTION_NODE | |
| 5 | Entity参考手册 实体引用 | Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册#cdata-section | 节点内容 | 实体参考名 | null | ENTITY_REFERENCE_NODE | |
| 6 | Entity 一个实体 | Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册 | 实体名 | null | ENTITY_NODE | ||
| 7 | ProcessingInstruction | 一个处理指令 | None | target | 节点的内容 | PROCESSING_INSTRUCTION_NODE | |
| 8 | Comment | 一个注释 | None | #comment | 注释文本 | COMMENT_NODE | |
| 9 | Document | 整个文档(DOM树的根节点) | Element, ProcessingInstruction, Comment, DocumentType | #document | null | DOCUMENT_NODE | |
| 10 | DocumentType | 为文档实体提供接口 | None | doctype name | null | DOCUMENT_TYPE_NODE | |
| 11 | DocumentFragment | 表示邻接节点和它们的子树。 | Element, ProcessingInstruction, Comment, Text, | CDATASection, Entity参考手册 | #document fragment | null | DOCUMENT_FRAGMENT_NODE |
| 12 Notation | 代表一个符号在DTD中的声明 | None | 符号名称 | null | NOTATION_NODE |