CKylin.Blog

[笔记] HTML里的注释原来真的是一个Node...

在看文章 连尤大都要借鉴的开源项目也会有一些迷惑行为 的“迷之叹号❗️”一节时,我看到文章提到这么一段描述:

确实呀,有时候用F12看vue构建的网站经常会在元素面板里看到大量这样的“注释”行,我一直只把它们当作某种形式的“插槽”,因为一旦那里有元素生成,它们就会被替换掉。但是,虽然认为它们是“插槽”,但是我仍然以为它们是文本的,毕竟连元素面板都给它显示成灰色和绿色嘛...

但是仔细一想又不对了,虽然这篇文章说的是SolidJS,<!>的用法也和Vue不同,但是这是不是代表这个注释也是一个实体元素呢?毕竟,Python的多段注释""" xxx """也是多段文本,只不过执行时会被跳过去罢了。

如果是一个正确的元素,那它一定能通过某种方式被创建。比如我想要创建div,那么可以这样:

const div = document.createElement("div");

其中div是标签名,所以可以通过createElement来创建。

如果是<!>或者<!---->,那能用来创建的名字就只能是!了。但是经过尝试,这个标签名被认为不合规:

不过我想到另一个情况,createElement就像它的名字那样,只能创建元素,可是网页里面并不只有元素,或者说HTML Document中并非是HTMLElement组成的,而是Node,比如这种Node:

这是一种文本Node,甚至可以用来给style标签插入css。或者说,某种意义上讲,所有HTML元素里面的字都是TextNode。

而查询moz文档看得到,HTMLElement的基类是Element,而Element也是实现了Node的接口。

所以,会不会其实Comment也是一种Node呢?

这个时候我才发现一个以前一直被忽略的问题。

在Chrome开发者窗口的元素面板中有一个功能,你可以选中任何元素,然后在控制台使用$0代指它,被选中的元素会有一个标记:

而注释,是可以被选中的:

这样基本上就可以确认这是一个实体,但是具体是什么呢?既然拿到了,就很好办了:

可以看到,Comment确实是Node,并且还可以被直接初始化。

而Node,是有一个replaceWith方法的。

或许这就是为什么Vue使用Comment来当作插槽的原因吧,Comment作为Node不渲染任何内容也不影响内容,但是可以在需要的时候快速替换,这样就能提升一些性能了。

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »