当前位置: 首页 > news >正文

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

第五章 HTML 解释器和 DOM 模型

1.DOM 模型

1.1 DOM标准

        DOM (Document Object Model)的全称是文档对象模型,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这里的文档可以是 HTML 文档、XML 文档或者 XHTML 文档。DOM 以面向对象的方式来描述文档,在 HTML 文档中,Web 开发者可以使用 JavaScript 语言来访问、创建、删除或者修改 DOM 结构,其主要目的是动态改变 HTML 文档的结构。

        DOM 以面向对象的方式来描述文档(HTML 文档、XML 文档、XHTML 文档)。DOM 定义的是一组与平台、语言无关的接口,该接口允许编程语言动态访问和更改结构化文档。W3C 标准化组织已经定义了 DOM Level 1(1998)、DOM Level 2(2000)、DOM Level 3(2004)、DOM Level 4 等 DOM 接口标准。

使用 DOM 表示的文档被描述成一个树形结构,使用 DOM 的接口可以对 DOM 树结构进行操作。

        DOM 结构构成的基本要素是节点:文档节点(整个文档 Document)、元素节点(HTML 中的标记 Tag)、属性节点(标记的属性)、Entity 节点、ProcessingInstruction 节点、CDataSection 节点、注释(Comment)节点。

        每一级的版本都对以前的版本进行了补充并伴随新功能的加入,每个版本都对 DOM 的不同部分进行了定义。

1.2 DOM 树
(1) 结构模型
        DOM 结构构成的基本要素是 “节点” ,而文档的 DOM 结构就是由层次化的节点组成。在 DOM 模型中,节点的概念很宽泛,整个文档(Document )就是一个节点,称为文档节点。HTML 中的标记(Tag)也是一种节点,称为元素(Element)节点。还有一些其他类型的节点,例如 属性节点(标记的属性)、Entity 节点、ProcessingIntruction 节点、CDataSection 节点、注释(Comment)节点等。

        文档的节点使用IDL语言来描述,文档继承自节点类型,使用Node接口。

        HTML文档的接口定义,都继承自文档的接口,同时又有自己的属性和接口,这些都跟HTML文档的具体应用相关。

(2) DOM 树
        众多的节点按照层次组织构成一个 DOM 树结构,DOM树的根就是HTMLDocument,HTML网页中的标签则被转换成一个个的元素节点。同数据结构中的树形结构一样,这些节点之间也存在父子或兄弟关系。


       树中存在元素节点和文档节点,其实在规范内部还存在属性节点,但不属于元素节点。在图中没有表现出来。

相关文章:

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

第五章 HTML 解释器和 DOM 模型 1.DOM 模型 1.1 DOM标准 DOM (Document Object Model)的全称是文档对象模型,它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这里的文档可以是 HTML 文档、XML 文档或者 XHTML 文档。D…...

小程序学习-21

目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 20M单个分包/主包大小不能超过 2M 独立分包:"independent": true...

Spring第七天(AOP)

简介 AOP(Aspect Oriented Programing)面向切面编程,一种编程范式,指导开发者如何组织程序结构 作用 在不惊动原始设计的基础上为其进行功能增强 Spring理念:无入侵式/无侵入式 基本概念 连接点(JoinPoint) : 程序执行过程中的任意位置&a…...

【0247】PG内核checkpoint实现机制分析(2)

文章目录 1. 前言2. checkpoint2.1 checkpoint工作机制2.2 项目实战3. 故障恢复(recovery)3.1 故障模拟3.2 规章恢复相关文章:...

单例模式分享

Java的单例模式详解与案例解析 单例模式是一种常见的设计模式,它确保一个类只有一个实例,并提供一个全局访问点。在Java中,实现单例模式有多种方式,我们将深入讨论其中的几种,并通过丰富的案例演示它们的用法。 1. 饿…...

Linux查找日志常用命令

tail tail命令常使用选项-f -f, --follow[{name|descriptor}]output appended data as the file grows;an absent option argument means descriptor例如: tail -1000f sys.log按回车键增加空白行,按Ctrl C 结束 vi / vim vi 文件名 如:…...

中国国际光伏展

中国国际光伏展是一个专注于光伏技术和行业的展览会。该展览会每年在中国举办,吸引了来自全球各地的光伏企业、专业人士和观众参加。 中国国际光伏展展览的主要内容包括光伏组件、光伏电池、光伏逆变器、光伏并网系统、光伏材料、光伏维护和管理等。展览会同时举办一…...

openai assistants api接入微信机器人,实现类GPTs功能

chatgpt网址:https://chat.xutongbao.top 比普通gpt多了代码解释器功能,和上传训练数据文件的功能,这两个功能就是GPTs拥有的,而普通gpt没有拥有的...

性能优化-OpenCL kernel 开发

「发表于知乎专栏《移动端算法优化》」 本文主要介绍OpenCL的 Kernel,包括代码的实例以及使用注意的详解。 🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:高性能(HPC)开发基础教…...

systick定时器

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 提示:这里可以添加本文要记录的大概内容: 例如:…...

Unity学习-逐帧图集动画制作

首先在文件部分创建一个Sprite Library Asset 然后点击创建出来的文件 点下面的加号添加对应的图 添加完成之后点一下Apply 然后新建一个物体 添加这三个组件 其中SpriteLibrary里面 把你刚刚创建的图集文件拉过来 Sprite Resolver选择对应的动作和图片 然后开始制作动画 An…...

鸿蒙使用第三方SO库

一、示例: 使用第三方SO库以导入OpenCV和MNN的SO库为例 1、将MNN和Opencv的so文件(包括.407文件),放入模块下libs目录对应的版本(arm64-v8a和armeabi-v7a) entry/libs/arm64-v8a/xxx.so2、配置模块目录下的build-profile.json5的buildOption字段&…...

宝塔FTP文件传输服务结合cpolar内网穿透实现远程连接本地服务

⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 文章目录 ⛳️ 推荐1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固…...

【ARMv8M Cortex-M33 系列 7.4 -- 如何使能 usagefault | memmange fault | bus fault 中断】

请阅读【嵌入式开发学习必备专栏 之 ARM Cortex-Mx专栏】 文章目录 背景异常使能配置 背景 由于文章【ARMv8M Cortex-M33 系列 7.2 – HardFault 问题定位 1】 中提到了HardFault 的发生是由于其它异常所升级导致的,所以就需要调查下如何是能其它异常中断。 异常使…...

Android Studio安卓开发--ListView学习整理

ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时屏幕上原有的数据则会滚动出屏幕。 1.ListView的简单用法 (1)activity_main.xml布局中加入ListView控件:(先占满整个布局的空间)…...

hyperf 和 laravel、lumen防止xss攻击中间件封装

hyperf 防止xss攻击自定义中间件封装 <?phpdeclare(strict_types1);namespace App\Middleware;use Psr\Container\ContainerInterface; use Psr\Http\Message\ResponseInterface; use Psr\Http\Server\MiddlewareInterface; use Psr\Http\Message\ServerRequestInterface;…...

flask web 学习之用户认证与会话管理

文章目录 一、安装及初始化二、设置用户加载回调函数三、定义User类四、实现登陆操作五、自定义登陆过程六、使用请求加载器自定义登录七、匿名用户功能八、记住我功能 Flask-Login是一个用于处理用户认证和会话管理的Flask插件。它简化了在Flask应用程序中实现用户登录、登出以…...

更改wpf原始默认按钮的样式

样式 代码 <Window x:Class"WpfApp4.Window1"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend/2008…...

【协议】HTTP、HTTPS和HTTP2.0学习总结

1. TCP/IP四层协议 记得大学学网络课程的时候&#xff0c;学的都是OSI/RM七层协议&#xff0c;应用层 -> 表示层 -> 会话层 -> 传输层->网络层->数据链路层->物理层&#xff0c;当时学的时候&#xff0c;感觉太抽象了&#xff0c;学得个一知半解。大脑在接收…...

[数据结构]顺序表

1、顺序表的概念及结构 1.1 线性表 线性表&#xff08; linear list &#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是⼀种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构&#…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...