《WebKit 技术内幕》之五(4): HTML解释器和DOM 模型

4 影子(Shadow)DOM
        影子 DOM 是一个新东西,主要解决了一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界的问题。

4.1 什么是影子 DOM
        当开发这样一个用户界面的控件——这个控件可能由一些 HTML 的标签元素组成,这些元素可以组成一颗 DOM 树的子树。这样一个 HTML 控件可以被到处使用,但是问题随之而来,那就是每个使用控件的地方都会知道这个子树的结构。 当网页的开发者需要访问网页 DOM 树的时候,这些控件内部的 DOM 子树都会暴露出来,这些暴露的节点不仅可能给 DOM 树的遍历带来很多麻烦,而且也可能给 CSS 的样式选择带来问题,因为选择器无意中可能会改变这些内部节点的样式,从而导致很奇怪的控件界面。

        如何将内部的节点信息封装起来,就像 C++ 语言的类一样,同时又能够将这些节点渲染出来呢 ? W3C 工作组提出的影子 DOM 概念。影子 DOM 的规范草案能够使得一些 DOM 节点在特定范围内可见,而在网页的 DOM 树中却不可见,但是网页渲染的结果中包含了这些节点,这就使得封装变得容易很多。

        下图描述了 HTML 文档对应的 DOM 树和 “div” 元素包含的一个影子 DOM 子树。当使用 JavaScript 代码访问 HTML 文档的 DOM 树的时候,通常的接口是不能直接访问到影子 DOM 子树中的节点的,JavaScript 代码只能通过特殊的接口方式。

        HTML5 支持了很多新的特性,例如对视频、音频的支持,读者会发现这些元素其实是由很复杂的控制界面组成,这些界面也是使用 HTML 元素编写,但是在 DOM 树中,你无法找到相应的节点,这其实也是使用了影子 DOM 的思想。

        因为影子 DOM 的子树在整个网页的 DOM 树中不可见,那么事件是如何处理的呢 ?事件中需要包含事件目标,这个目标当然不能是不可见的 DOM 节点,所以事件目标其实就是包含影子 DOM 子树的节点对象。事件捕获的逻辑没有发生变化,在影子 DOM 子树内也会继续传递。当影子 DOM 子树中的事件向上冒泡的时候, WebKit 会同时向整个文档的 DOM 上传递该事件,以避免一些很奇怪的行为。

4.2 WebKit 的支持
        WebKit 已经支持影子 DOM 的规范草案,虽然还存在一些问题。支持影子 DOM 的相关类在目录 “Source/core/dom/shadow” 下,里面的主要类是 ShadowRoot ,表示的是影子 DOM 的根节点。ShadowRoot 类继承自 DocumentFragment 类,所以它同样有 Node 节点的属性和方法,因而在影子 DOM 树的内部,遍历树没有什么特别不同的地方。

        当遍历 HTML 文档对应 DOM 树的时候,WebKit 需要做特别的判断,所以读者会发现在 WebKit 的 Node 类实现中存在大量的条件语句,用来检查当前节点是否是 ShadowRoot 对象,如果是该类的对象,把它作为不同 DOM 树之间的边界。有时候 WebKit 还需要对 ShadowRoot 对象作出特别处理,比如某些情况会略过它的子树,同样的,在事件处理的支持类 EventPathWalker 和 EventRetargeter 中,也需要做一些特别的处理逻辑,原理就是上面所述,细节不再介绍。

4.3 实践:使用影子 DOM
        示例代码 5-2 给出了一个简单的使用 webkitCreateShadowRoot 接口来创建影子 DOM 子树的例子。网页只包含了一个 “div” 元素,JavaScript 代码使用该元素创建了一个影子 DOM 子树的根节点,然后该根节点下加入了两个子女,第一个是图片元素,第二个是 “div” 元素,该元素内部包含了一些文本。

          打开 Chrome 浏览器的开发者工具,然后打开控制台,在其中输入 “document.firstChild.firstChild.nextElementSibling.firstElementChild.firstElementChild” 后会发现结果是空的,根据对应关系 “#document-> html -> head -> body -> div -> null”,虽然网页中没有 ‘head’ 元素,但是 DOM 树仍然会创建该节点。同时读者会发现 “div” 元素没有子女,影子 DOM 子树真的被隐藏起来了,成为真正的影子。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637051.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端学习笔记2】javaScript基础

是什么: 是一种运行在客户端(服务器的编程语言) javacript分为行内JavaScript,内部JavaScript,外部JavaScript 内部JavaScript 直接写在html中body里面 alert(“hello,world”)…

Flutter 入门

什么是Flutter Flutter 只是一个用来解决跨平台的UI框架,最终还是要使用原生平台进行绘制,对于大部分和系统API无关的页面都可以使用Flutter处理,但是有一些获取系统信息的页面比如某个页面获取Android是否打开了通知栏权限?获取手机电池电量…

React16源码: React中的IndeterminateComponent的源码实现

IndeterminateComponent 1 )概述 这是一个比较特殊的component的类型, 就是还没有被指定类型的component在一个fibrer被创建的时候,它的tag可能会是 IndeterminateComponent在 packages/react-reconciler/src/ReactFiber.js 中,有…

Impala:基于内存的MPP查询引擎

Impala查询引擎 1、Impala概述 1、Impala概述 Impala是Cloudera公司主导研发的高性能、低延迟的交互式SQL查询引擎,它提供SQL语义,能查询存储在Hadoop的HDFS和HBase中的PB级大数据。Impala是CDH平台首选的PB级大数据实时交互式查询分析引擎 2015年11月&…

使用Sobel算子把视频转换为只剩边缘部分

效果展示 原始视频 修改后的视频 整体代码 import cv2vc cv2.VideoCapture(test.mp4)if vc.isOpened():open, frame vc.read() else:open Falsei 0 while open:ret, frame vc.read()if frame is None:breakif ret True:i 1# 转换为灰度图gray cv2.cvtColor(frame, cv…

实现分布式锁

背景 分布式锁是一种用于协调分布式系统中多个节点之间并发访问共享资源的机制。在分布式系统中,由于存在多个节点同时访问共享资源的可能性,需要使用分布式锁来保证数据的一致性和正确性。 今天要实现的是分布式场景中的互斥类型的锁。 下面时分布…

Tensorflow 入门基础——向LLM靠近一小步

进入tensflow的系统学习,向LLM靠拢。 目录 1. tensflow的数据类型1.1 数值类型1.2 字符串类型1.3 布尔类型的数据 2. 数值精度3. 类型转换3.1 待优化的张量 4 创建张量4.1 从数组、列表对象创建4.2 创建全0或者1张量4.3 创建自定义数值张量 5. 创建已知分布的张量&…

luceda ipkiss教程 56:画多端口螺旋线

案例分享:画多端口螺旋线 注:spiral的长度不是真实长度,具体可以参考教程28 代码如下: from si_fab import all as pdk import ipkiss3.all as i3 import numpy as np from scipy.constants import piclass SpiralCircular(i3.P…

linux perf工具使用

参考文章Linux性能调优之perf使用方法_perf交叉编译-CSDN博客 perf是一款Linux性能分析工具。比如打流性能优化的时候,就能够看到是哪些函数消耗的cpu高 那么linux如何编译perf工具呢? perf工具编译 进入perf目录下linux-3.16/tools/perf make ARCH…

HarmonyOS 应用开发入门

HarmonyOS 应用开发入门 前言 DevEco Studio Release版本为:DevEco Studio 3.1.1。 Compile SDK Release版本为:3.1.0(API 9)。 构建方式为 HVigor,而非 Gradle。 最新版本已不再支持 (”Java、JavaScrip…

React16源码: React中的updateHostRoot的源码实现

HostRoot 的更新 1 )概述 HostRoot 是一个比较特殊的节点, 因为在一个react应用当中它只会有一个 HostRoot, 它对应的 Fiber 对象是我们的 RootFiber 对象重点在于它的更新过程 2 )源码 定位到 packages/react-reconciler/src/ReactFiberBeginWork.js…

【Qt】信号和槽

需要云服务器等云产品来学习Linux的同学可以移步/-->腾讯云<--/-->阿里云<--/-->华为云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、Qt中的信号和槽 1、信号 2、槽 3、Q_OBJECT 二、Qt中的connect函…

Windows下 VS2022 编译OpenSSL 库

SSL是Secure Sockets Layer(安全套接层协议)的缩写,可以在Internet上提供秘密性传输。Netscape公司在推出第一个Web浏览器的同时,提出了SSL协议标准。其目标是保证两个应用间通信的保密性和可靠性,可在服务器端和用户端同时实现支持。已经成为Internet上保密通讯的工业标准…

k3s x GitLab Runner Operator,GitLab CI 云原生构建新体验

GitLab CI 是非常常用的一款 CI/CD 工具&#xff0c;只需要在 .gitlab-ci.yml 文件中用 YAML 语法编写 CI/CD 流水线即可。而 GitLab CI 能够运行的关键组件是 GitLab Runner。GitLab Runner 是一个轻量级、高扩展的代理&#xff0c;主要用来执行 GitLab CI/CD 流水线中的 Job&…

stm32 FOC系列 直流有刷控制原理

1、直流有刷驱动板 使用三极管搭建的简易 H 桥电路&#xff0c;如图 5.3.1 所示&#xff1a; 图 5.3.1 是使用三极管搭建的简易 H 桥电路&#xff0c;其中 MOTOR 表示直流有刷电机&#xff0c; Q1、 Q2、 Q3 和 Q4 为 4 个三极管&#xff0c;其中 Q1 和 Q3 接在了电源正极&…

[AutoSar]BSW_OS 08 Autosar OS_内存保护

一、 目录 一、关键词平台说明一、内存保护的概念 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC) >>>>>回到总目录<<<<&l…

matlab appdesigner系列-常用13-标签

标签&#xff0c;用来显示各类文本 此示例&#xff0c;就是在标签之外的画布上单击鼠标左键&#xff0c;显示王勃的《滕王阁诗》 操作如下&#xff1a; 1&#xff09;将2个标签拖拽到画布上&#xff0c;并修改相应文字。将第二个标签的右侧文本信息中的Wordwrap打开&#xf…

【C++】文件操作

文件操作 一、文本文件&#xff08;一&#xff09;写文件读文件 二、二进制文件&#xff08;一&#xff09;写文件&#xff08;二&#xff09;读文件 程序运行时产生的数据都属于临时数据&#xff0c;程序一旦运行结束都会被释放&#xff0c;通过文件可以将数据持久化&#xff…

记录一下uniapp 集成腾讯im特别卡(未解决)

uniapp的项目运行在微信小程序 , 安卓 , ios手机三端 , 之前这个项目集成过im,不过版本太老了,0.x的版本, 现在需要添加客服功能,所以就升级了 由于是二开 , 也为了方便 , 沿用之前的webview嵌套腾讯IM的方案 , 选用uniapp集成ui ,升级之后所有安卓用户反馈点击进去特别卡,几…

基于 OpenVINO, yolov5 推理

OpenVINO 是英特尔开发的一款功能强大的深度学习工具包&#xff0c;可实现跨多个硬件平台的优化神经网络推理。在本文中&#xff0c;我们讨论了 OpenVINO 的特性和优势&#xff0c;以及它如何与领先的计算机视觉平台 Viso Suite 集成&#xff0c;以构建和交付可扩展的应用程序。…