关于nodeType

811 阅读2分钟

前言

最近在看B站视频分析Vue源码,其中在分析解析器的时候看到一个方法,是判断在 new Vue()时 传入的 el 参数是否是节点信息的方法, 这个方法涉及到判断当前出入的参数 nodeType类型 。之前也没关注这块内容,基于此做下记录。

定义和用法

nodeType 属性返回节点类型。通常使用的 node.nodeType 来获取节点类型。常见的节点类型如下:

  • 如果节点是一个元素节点,nodeType 属性返回 1。

  • 如果节点是属性节点, nodeType 属性返回 2。

  • 如果节点是一个文本节点,nodeType 属性返回 3。

  • 如果节点是一个注释节点,nodeType 属性返回 8。

该属性是只读的。

节点类型总结

一个HTML或XML文档的文件,元素,属性等有不同的节点类型。

有12种不同的节点类型,不同的节点类型也可以有不同的子节点类型:

节点类型节点描述子节点nodeName返回值nodeValue返回值Named Constant(静态变量名)
1Element一个元素Element, Text, Comment, ProcessingInstruction, CDATASection, Entity参考手册元素名nullELEMENT_NODE
2Attr一个属性Text, Entity参考手册属性名属性值ATTRIBUTE_NODE
3Text一个元素的文本内容 或属性NoneTEXT_NODECDATA_SECTION_NODE
4CDATASection一个文档的CDATA部分(文本将不会被解析器解析)None#text节点内容CDATA_SECTION_NODE
5Entity参考手册 实体引用Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册#cdata-section节点内容实体参考名nullENTITY_REFERENCE_NODE
6Entity 一个实体Element, ProcessingInstruction, Comment, Text, CDATASection, Entity参考手册实体名nullENTITY_NODE
7ProcessingInstruction一个处理指令Nonetarget节点的内容PROCESSING_INSTRUCTION_NODE
8Comment一个注释None#comment注释文本COMMENT_NODE
9Document整个文档(DOM树的根节点)Element, ProcessingInstruction, Comment, DocumentType#documentnullDOCUMENT_NODE
10DocumentType为文档实体提供接口Nonedoctype namenullDOCUMENT_TYPE_NODE
11DocumentFragment表示邻接节点和它们的子树。Element, ProcessingInstruction, Comment, Text,CDATASection, Entity参考手册#document fragmentnullDOCUMENT_FRAGMENT_NODE
12 Notation代表一个符号在DTD中的声明None符号名称nullNOTATION_NODE