什么是DOM，DOM的作用，以及DOM与JavaScript的关系

        一个想学web前端的初学者，如果在知乎中搜索推荐书目的话，得到的答案多数都是：首先，学习htlm+css；第二点就是阅读《JavaScript DOM 编程艺术》这本书。

        作为一个初学的小白，JavaScript大概知道是个什么东西，但是DOM是什么？？

        在该书的前沿部分写道：本书的真正目的是让大家理解DOM脚本编程技术背后的思路和原则。然而在看了将近2/5的书之后，对于DOM这个概念还是模棱两可(小渣渣不懂事，勿喷...)，对于DOM和JavaScript之间的关系也是非常糊涂，于是整理书上对于两者的解释并根据网上查阅到的资料，理一理到底什么是DOM，它和JavaScript又有什么关系。

目录

1.什么是DOM？

2.DOM有什么用？

3.DOM和JavaScript的关系.

1.什么是DOM？

• DOM是一套对文档的内容进行抽象和概念化的方法。       ——《JavaScript DOM 编程方法》
• 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。  ——百度百科
• 文档对象模型 (DOM) 是HTML和XML文档的编程接口。     —— MDN

由此可见，DOM是一个接口，一个API，而这个API是经过标准化的。说到标准化，就要说一说DOM的历史了。

Netscape Navigator 4和IE 分别于1997年先后发布了经过改进，大幅扩展的DOM，使JavaScript能够完成的功能大大增加，这本是前端程序员的福音，但是这两个版本的DOM却有个致命的缺点，不兼容！换句话说，虽然浏览器制造商的目标一样，但他们在解决DOM问题时采用的办法完全不同。因此很多时候，程序员在编写DOM脚本代码时不得不编写两次，一次为Netscape Nacvigator,另一次为IE。于是人们越来越少的使用它。

就在浏览器制造商以DOM为武器展开营销大战是，W3C(万维网联盟World Wide Web Consortium)不事声张地结合大家的优点推出了一个标准化的DOM，令人欣慰的是，Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并于1998年10月完成了"第一级DOM（DOM Level 1）"。现已发展至3级DOM。

作为DOM的统一者W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档（html或xml文档）的内容、结构和样式。”

其实讲了半天，就是一句话，DOM是一个接口，我们可以通过DOM这个接口来对文档（即HTML或XML）进行修改。

那么DOM能完成怎样的修改，达到什么样的效果呢？这就是接下来要讲的，DOM的作用。

2.DOM有什么用？

DOM把一份文档（以HTML为例）表示为一棵树。如下图所示：

                                                    （图片来源于网络）

在DOM中，文档是由节点构成的集合，而节点又分为不同的类型。元素(element)节点，文本(text)节点，属性(attribute)节点。

• 元素节点：如上图中的,,,