JS--DOM初相识

来源：互联网发布：网上商城软件开发编辑：程序博客网时间：2024/05/05 20:49

从自学前端的第一百秒开始，我就对DOM疑惑不解！

首先，我知道DOM是文档（Document）对象（Object）模型（Model）的简写，还一直看到很多文字都在告诉我，DOM把文档渲染成了一棵树！！！树在哪里？

当时我就蒙了！

仅仅被DOM三个字。

后来经过了大半年，模模糊糊的一直学，直到有一天我看到了一张图。

这里写图片描述

是的，就是这张Webkit渲染引擎的主要渲染过程。

看到了吗？DOM树在红色圆圈那里，而HTML在树的左边，而且有箭头链接着，中间还写着HTML parser（HTML解析！）

这里透露出了一个非常重要的信息，DOM树是真实存在的（天！我之前一直以为只是为了方便理解而假想的一个模型。），而且，DOM树是由HTML解析，再在DOM基本规则的限制下构建而成。

那么，要真正理解DOM树构建过程，就要去理解HTML解析过程。

这里先抛出几个问题：

DOM树是怎么构建完毕的？
JavaScript是怎样影响DOM树的。
要先解析HTML。那么首先是要获取一份HTML资源（这里的HTML资源包含了呈现一个完整页面所需要的所有资源：比如图片，外联JavaScript，和外联CSS文件。）。

从在地址栏输入一个合法的URL开始到获取到一份完整HTML资源是一个很复杂的过程，这里略过，现在假定浏览器已经获取到了HTML资源，准备开始解析。

浏览器解析HTML是自上往下的，也就是说，如果从我们能看到的元素开始，解析就是从文档类型声明开始最后到</html>标签结束。
来看下面一篇简单的HTML文档。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link href="XXXXXXX">    <script src="XXXXXXXXXXXX"></script></head><body>    <!-- 紫樱常在，木梯依旧。 -->    <div id="string">紫樱木梯常在，木梯依旧。</div></body></html>

根据以上所述，解析先是从开始，然后遇到<html>标签，之后进入各个HTML元素的解析，解析时遇到图片，就是发生图片请求，遇到CSS就发生CSS请求，遇到script，这额有些特殊，下面讲！

其实解析的过程就是对象化的过程。就比如：当解析引擎遇到<div>时，就会根据已经规定好的规则创建一个HTMLDIVElement对象，并把附加在<div>上的属性，方法，事件，数据以对象属性的方法分别存储在创建到的HTMLDIVElement对象中，然后再将该对象存储在计算好的存储单元中。

所以说，我们在HTML文档中添加元素，或给元素添加属性或事件，其实到了DOM树都会变成对象，也就是说，我们可以把构建HTML文档的过程想象成是初始化DOM对象的过程。这就像我们平常初始化一个普通对象一样。

到了这里，就可以回答：

DOM树是怎么构建完毕的？
答：DOM树其实就是将HTML文档中的每个元素对象化后存储在内存中，并且这些对象通过这样或那样的联系连接了起来，所以从宏观上看，就像一份家谱，一颗树的结构一样。

那么现在到了第二个问题。

平时我们都会听到利用JavaScript操作DOM，动态操作DOM这些话，那么JavaScript是在哪里影响了DOM呢？

要回到这里问题，我们要确认一点，JavaScript代码的位置在哪里？是的，大家都知道：无论是内嵌式JavaScript代码还是外联式的JavaScript，都是包含在<script></script>中的，而该标签是在HTML文档中声明的，所以按照HTML自上往下解析的特性，在遇到<script>标签时就会对JavaScript代码进行解析。

但<script>是一个非常特殊的标签，它的特殊在于:它可以改变DOM树，比如利用JavaScript代码可以动态的增加或删除之前已经解析好的DOM对象。

正是由于这个特性，<script></script>变得很霸道，当解析器解析到它的时候，它便强制停止所有其他的解析，占用全部的资源，只让它本身下载并解析完毕之后才让出资源，以便以后的解析过程。

不过，霸道也是有道理的。因为JavaScript代码可以改变DOM的特殊性，如果不停止其他元素或资源的解析可能会导致一些不可预料的错误。比如一个经典的例子：document.write()会重写整个HTML文档，假定如果不在解析JavaScript时强制停止所有的解析，那么其实在执行上述这段代码的所有解析都是无效的。

到了这里，就可以回答：

JavaScript是怎样影响DOM树的。
答：JavaScript是存储在script标签中的代码，如果解析到script标签，JavaScript代码就会对DOM进行各种操作，最后生成一颗被JavaScript修改后的DOM树。

不过呢，这只是在文档第一次解析中JavaScript对DOM树的操作，而在完整的呈现网页给用户之后，用户还可以通过事件机制和网页产生交互，这也会导致DOM树的变化。当DOM树变化之后，又进行重新一轮的渲染和绘制并呈现。

总结：

1.我以前走入一个误区，我曾经以为JavaScript其实操作的HTML文档，但之前我对HTML文档也是不甚理解。

2.DOM是一个非常重要的内容，JavaScript的每一步操作都是首先反应在DOM树上，然后再经过渲染，最后绘制呈现给客户。

3.编写HTML结构的过程，其实可以想象成是定义DOM对象的过程，因为你在HTML文档中定义的每个属性都会被存储在DOM对象。
当然，DOM对象不仅仅是拥有自定义的属性，它最主要的是拥有很多DOM规范已经定义好的属性和方法，利用那些规范定义好的DOM对象的属性和方法，再加上JavaScript的逻辑操作，就可以对DOM树进行各种各样的操作。

4.当文档解析遇到js时，解析引擎会挂起其他所有的解析线程，等待js解析并执行完成。

5.CSS会阻塞js的执行，因为js有可能要用到CSS中定义的属性。

1 0