浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码，以此为例来分析解析HTML文档的原理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="script.js"></script>

    <link  rel="stylesheet" type="text/css" href="style.css">

    <title></title>

</head>

<body>

    <h1>HelloWorld</h1>

    <div>

        <div>

            <p>picture:</p>

            <img src="example.png"/>

        </div>

        <div>

            <p>A paragraph of explanatory text...</p>

        </div>

    </div>

</body>

</html>

　　

豌豆资源搜索网站 https://55wd.com

浏览器解析HTML文档，在<head>中发现了<script>和<link>引入文件，于是向服务器请求文件，在请求和下载文件过程中将继续向下解析HTML，当引入文件下载完成后会通知浏览器回头来解析css和script文件。

如果浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器同样不会等到图片下载完，而是继续渲染后面的代码；

现在进入正题，讲讲自己对解析HTML文档构建DOM树的理解：

此过程可分为两个主要模块构成，即

  • 标签解析
  • DOM树构建

1. 标签解析

这部分完成从HTML字符串中解析出标签的功能。主要使用标记化算法。

标记化算法的输入结果是HTML标记，使用状态机表示。状态机一共有4个状态：数据状态(Data)、标记打开状态(Tag open)、标记名称状态(Tag name)、关闭标记打开状态(Close tag open state)。

初始状态是数据状态。

当标记是处于数据状态时，

1）遇到字符<时，状态更改为“标记打开状态”：

a. 接收一个a-z字符会创建“起始标记”，状态更改为“标记名称状态”，并保持到接收>字符。此期间的字符串会形成一个新的标记名称。接收到>标记后，将当前的新标记发送给树构造器，状态改回“数据状态”

b. 接收下一个输入字符/时，会创建关闭标记打开状态，并更改为“标记名称状态”。直到接收>字符，将当前的新标记发送给树构造器，并改回“数据状态”。

2）遇到a-z字符时，会将每个字符创建成字符标记，并发送给树构造器。

2. DOM树构建

当标签解析器解析出标签后会发送到DOM树构建器，我们可以认为DOM树构建器主要有以下两部分组成：

  • DOM树
  • 一个存放标签名的栈

用如下代码演示生成DOM树的过程：

<html>

<body>

    <h1>HelloWorld</h1>

    <div>

        <div>

            <p>picture:</p>

            <img src="example.png"/>

        </div>

        <div>

            <p>A paragraph of explanatory text...</p>

        </div>

    </div>

</body>

</html>

<span><span class="tag"></span></span>

　　

首先树构建器接收到标签解析器发来的起始标签名后，会加入到栈中，图1是解析到<h1>标签的栈中压入的内容，共有<html><body><h1>三个标签，此时还未向DOM树中添加任何结点（图中黑色实线框代表开始标签，红色虚线框代表结束标签，结束标签不会入栈）。

继续向下解析，接收到一个</h1>结束标签，此时查询栈顶元素，如果和传入的结束标签属于同种类型的p标签（如图2），则将栈顶元素弹出，向DOM树中加入此节点，然后继续向下解析（如图3）。

如果遇到的是没有封闭标签的元素如<img/>，则直接加入DOM树中即可，无需入栈。

依次向下解析，当栈为空，即<html>根节点也加入到DOM树中，DOM树构建完毕。

这里需要指出的是，当某个元素缺失结束标签时，假如上述代码中第一个<div>标签缺失了</div>结束标签，即：

<html>

<body>

    <h1>HelloWorld</h1>

    <div>

        <div>

            <p>picture:</p>

            <img src="example.png"/>

        </div>

        <div>

            <p>A paragraph of explanatory text...</p>

        </div>  

</body>

</html>

那么，此时的栈如图4所示。即此时传来的结束标签是</body>，而栈顶元素是<div>，两者不是同一种标签，说明div缺少了结束标签，这种情况也将栈顶<div>元素弹出，加入到DOM树中。相当于给<div>补了一个</div>结束标签。

HTML文档解析和DOM树的构建的更多相关文章

  1. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  2. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  3. iOS网络编程笔记——XML文档解析

    今天利用多余时间研究了一下XML文档解析,虽然现在移动端使用的数据格式基本为JSON格式,但是XML格式毕竟多年来一直在各种计算机语言之间使用,是一种老牌的经典的灵活的数据交换格式.所以我认为还是很有 ...

  4. Android XML文档解析(一)——SAX解析

    ---------------------------------------------------------------------------------------------------- ...

  5. 第一百一十四节，JavaScript文档对象，DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  6. ios-XML文档解析之SAX解析

    首先SAX解析xml *xml文档的格式特点是节点,大体思路是把每个最小的子节点作为对象的属性,每个最小子节点的'父'节点作为对象,将节点转化为对象,输出. 每个节点都是成对存在的,有开始有结束.有始 ...

  7. jsoup -- xml文档解析

    jsoup -- xml文档解析 修改 https://jsoup.org/cookbook/modifying-data/set-attributes https://jsoup.org/cookb ...

  8. （二）发布第一个WebService服务与DSWL文档解析

    1. 编写接口 package service; import javax.jws.WebService; /** * 第一个webservice服务, * @WebService注解表示这是一个we ...

  9. 读取EXCEL文档解析工具类

    package test;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException ...

随机推荐

  1. Java实现蓝桥杯正则问题

    题目描述 考虑一种简单的正则表达式: 只由 x ( ) | 组成的正则表达式. 小明想求出这个正则表达式能接受的最长字符串的长度. 例如 ((xx|xxx)x|(x|xx))xx 能接受的最长字符串是 ...

  2. Java实现LeetCode_0012_IntegerToRoman

    package javaLeetCode.primary; import java.util.Scanner; public class IntegerToRoman_12 { public stat ...

  3. 彻底搞懂 etcd 系列文章（一）：初识 etcd

    0 专辑概述 etcd 是云原生架构中重要的基础组件,由 CNCF 孵化托管.etcd 在微服务和 Kubernates 集群中不仅可以作为服务注册与发现,还可以作为 key-value 存储的中间件 ...

  4. iOS－AutoLayout中动画使用的细节 和 iOS layout机制

    在Main.storyboard拖入一个UIView,随便设置一个背景色, 使用autolayout  为紫色的view添加约束 :(0,0,100,100) , 为该view添加动画代码如下: #i ...

  5. 用mvc框架查询数据库数据

    介绍下mvc框架,mvc框架一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑. 首先我们 ...

  6. Python内置Turtle绘图库方法简介+多案例

    urtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的 ...

  7. 手动造轮子——基于.NetCore的RPC框架DotNetCoreRpc

    前言     一直以来对内部服务间使用RPC的方式调用都比较赞同,因为内部间没有这么多限制,最简单明了的方式就是最合适的方式.个人比较喜欢类似Dubbo的那种使用方式,把接口层单独出来,作为服务的契约 ...

  8. Springboot拦截器实现IP黑名单

    Springboot拦截器实现IP黑名单 一·业务场景和需要实现的功能 以redis作为IP存储地址实现. 业务场景:针对秒杀活动或者常规电商业务场景等,防止恶意脚本不停的刷接口. 实现功能:写一个拦 ...

  9. 利用java从docx文档中提取文本内容

    利用java从docx文档中提取文本内容 使用Apache的第三方jar包,地址为https://poi.apache.org/ docx文档内容如图: 目录结构: 每个文件夹的名称为日期加上来源,例 ...

  10. linux安装syncthing

    https://blog.csdn.net/weixin_30527551/article/details/98882344 https://syncthing.net/downloads/ http ...