未来世界的树 － DOM Tree

每个网页都生长着一种可以七十二变的虚拟树。

DOM

DOM 是 Document Object Model 的简称，中文译为文件物件模型，是浏览器提供的 API，并不是 JavaScript 语言的一部份。至於文件指的就是HTML 文件，等等！那为什麽又跟物件有关系？ HTML 不就是一大堆让人眼花撩乱的 tag 和文字内容组成的吗？为什麽是物件？

以下纯属个人想像

如果把 HTML 的结构图想像成图画纸上的苹果树，为什麽是苹果树？没有什麽原因，纯粹因为我喜欢苹果。那麽有一天当大家都不喜欢苹果树，比较想看樱桃树，那我就得用另一张图画纸画上樱桃树，每当大家喜新厌旧的同时，就是我埋头苦画树干的时刻。
这时浏览器感人地派出 DOM 来神救援，DOM 的出现让平面的苹果树，变成像是乐高做成的苹果树，这麽一来就可以直接把红苹果换成青苹果，或是把苹果换成柳橙，莲雾或是芭乐。皆大欢喜～

我们还是认真一点来看看MDN的精准专业描述怎麽说：

The DOM represents the document as nodes and objects; that way, programming languages can interact with the page

那麽HTML又是怎麽从单纯的文件摇身一变成了DOM呢？那就得来了解一下浏览器是怎麽渲染网页的。

浏览器渲染过程

图片来源：High Performance Browser Networking - Chapter 10. Primer on Web Performance

长话短说可简述成下列五步骤：

1. 充满热情充满爱的网页开发者手刻产生出 HTML 和 CSS
2. 浏览器解析了 HTML，将之转换成 DOM，平行宇宙另一端的 CSS 也会透过解析器转换成 CSSOM，在DOM的阶段可以透过 JavaScript 来动态产生其他元素和效果，这样一来网页开发者就可以使用这些物件模型所提供的方法来增加网页的互动性。
3. 接着，DOM 和 CSSOM 会被整合成 Render Tree，这个阶段会排除掉不需要出现在画面上的节点，例如head节点。
4. 在排版阶段则会进行每个节点的运算，决定每个节点应该在画面的何处出现，主要产生简单的几何形状。
5. 最後阶段就会细部绘制各个元件，呈现完整的网页。

粗略了解了 DOM Tree 和浏览器渲染网页的过程後，接下来几天就来一步步认识 DOM 的资料类型并探索如何操作 DOM 吧~

参考资料：

• Introduction To the DOM - MDN
• An Introduction to Browser Rendering