HTML解析
一、文件拆分和接口设计
- 为了方便文件管理,我们把parser单独拆到文件中
- parser接受HTML文本作为参数,返回一颗DOM树(通过parser的parseHTML方法)
二、FSM来实现HTML的分析
- 我们用FSM来实现HTML的分析
- 在HTML标准中,已经规定了HTML的状态
- Toy-Browser只挑选其中一部分状态,完成一个最简版本
三、解析标签
- 主要的标签有:开始标签,结束标签和自封闭标签
<div></div><br />
- 在这一步我们暂时忽略属性
四、创建元素
- 在状态机中,除了状态迁移,我们还会要加入业务逻辑
- 我们在标签结束状态提交标签token
五、处理属性
- 属性值分为单引号、双引号、无引号三种写法,因此需要较多状态处理
- 处理属性的方式跟标签类似
- 属性结束时,我们把属性加到标签Token上
六、构建DOM树
- 从标签构建DOM树的基本技巧是使用栈
- 遇到开始标签时创建元素并入栈,遇到结束标签时出栈
- 自封闭节点可视为入栈后立刻出栈
- 任何元素的父元素是它入栈前的栈顶
七、文本节点
- 文本节点与自封闭标签类似
- 多个文本节点需要合并