您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

dom 中的 nodeType 节点类型

时间:2019-12-20 11:04:12  来源:  作者:

dom 中的 nodeType 节点类型
 
 

前言

看到 vue AST 抽象语法树中有这样的定义:

dom 中的 nodeType 节点类型
 
中间根据的 child.type 难道是随意定义的吗?我不敢瞎揣测,不过既然是对 document 树的解析,那必然会和 document 扯上关系。

这时我尝试在 F12 中输出 document 看到了 nodeType 属性和这个 child.type 相似。

个人认为可能有所关系,不过不重要,因为这篇主要讲 document 中的 nodeType 节点类型。

nodeType 的分类

我在 MDN 上搜索 nodeType ,看到如下表格:

dom 中的 nodeType 节点类型
 
当然还有一些类型已经废弃,这里不再列举。

通过 nodeType 来定义我们 document 上节点的节点类型,通过代码,你讲看到具体的输出:

这是一段很简单的 html 文件:

dom 中的 nodeType 节点类型
 
然后我简单定义了个工具方法,示意 nodeType :
 
dom 中的 nodeType 节点类型
 
为了使得全部的节点类型输出顺利,我单独针对部分类型处理:
 
dom 中的 nodeType 节点类型
 
然后是常规的 html 元素:
 
dom 中的 nodeType 节点类型
 
 

回过头看 vue

为什么 vue 中的 type 属性只出现了 2、3 (默认 1)?

如果你熟悉其中的 parseHTML 方法,如下应该就是其答案:
 

dom 中的 nodeType 节点类型
 

首先在对 html 解析时,会优先对 注释(COMMENT_NODE,CDATA_SECTION_NODE) 、文档类型(DOCUMENT_NODE, DOCUMENT_TYPE_NODE) 进行判断;另外 vue 本身就是虚拟 Dom 机制,所以也就不需要 DOCUMENT_FRAGMENT_NODE 。

最后只要匹配 ELEMENT_NODE 和 TEXT_NODE 类型即可(值为 1,3)。

我们知道 innerHtml 会有 双大括号 表达式,vue 就空出 2 专门用来对表达式解析。

总结

我只是看 vue 渲染代码时,好奇为什么 type 是这样的取值方式。也许是错的,不过希望各位对 nodeType 这个 document 上的属性有所认识。



Tags:dom   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  Tags: dom  点击:(35)  评论:(0)  加入收藏
random模块是Python中一个用于生成随机数的模块,其中包含了生成伪代随机数的函数,有助于编写模拟程序或者生成随机输出的程序。需要注意的是这些数虽然看起来好像是完全随机的...【详细内容】
2021-08-16  Tags: dom  点击:(104)  评论:(0)  加入收藏
什么是 DOMDOM(Document Object Model,文档对象模型)是 JavaScript 操作 HTML 的接口(这里只讨论属于前端范畴的 HTML DOM),属于前端的入门知识,同样也是核心内容,因为大部分前端...【详细内容】
2020-07-02  Tags: dom  点击:(29)  评论:(0)  加入收藏
前言看到 vue AST 抽象语法树中有这样的定义: 中间根据的 child.type 难道是随意定义的吗?我不敢瞎揣测,不过既然是对 document 树的解析,那必然会和 document 扯上关系。这...【详细内容】
2019-12-20  Tags: dom  点击:(88)  评论:(0)  加入收藏
DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构,并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点,每个节点包含子节点、对象。DOM API非常庞大,在本文中,咱们只讨论比较常用有有...【详细内容】
2019-12-11  Tags: dom  点击:(81)  评论:(0)  加入收藏
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考,具体如下:JavaScript Dom 绑定事件// 先获取Dom对象,然后进行绑定document.g...【详细内容】
2019-10-18  Tags: dom  点击:(231)  评论:(0)  加入收藏
近日,一种名为“Domen”的新型黑客工具包被发现,它潜伏在被黑掉的合法网站上,通过展示虚假浏览器和应用软件更新警报页面来诱骗你点击,进而使用恶意软件和远程访问软件来感染你...【详细内容】
2019-09-19  Tags: dom  点击:(217)  评论:(0)  加入收藏
很多时候"不得已"使用js操作DOM,这个操作过程到底是"同步"的还是"异步"呢?...【详细内容】
2019-08-15  Tags: dom  点击:(266)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条