什么是DOM？
通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
Node 层次
节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
下面这个图片表示一个文档树（节点树）：
[图片上传失败...(image-c5c31a-1514108580305)]
文档树（节点数）
请看下面这个HTML文档：
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例，<head> 和 <body> 的父节点是 <html> 节点，文本节点 "Hello world!" 的父节点是 <p> 节点。大部分元素节点都有子节点。比方说，<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 "DOM Tutorial"。当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1> 和 <p>是同辈，因为它们的父节点均是 <body> 节点。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是 <html>节点的后代，而第一个文本节点是 <head> 节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
Javascript主要是利用HTML DOM去获得、改变、创建HTML元素，从而达到美化页面、操作页面元素的目标。因此，在Javascript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外，Javascript有自己的对象，例如数组。
简单说，可以认为Javascript主要是操纵HTML DOM。两者是不一样的。
Javascript是语言，DOM是可以在各种语言中（不仅js，php也有的）动态修改文档的模型。
下面单独拉出JavaScript与DOM的关系给大家详解
JavaScript与浏览器的工作
1.浏览器获取并加载你的页面，从上至下解析它的内容。
遇到JavaScript时，浏览器会解析代码，检查它的正确性，然后执行代码。
浏览器还会建立一个HTML页面的内部模型（DOM）。
2.JavaScript继续执行，使用DOM检查页面、完成修改、从页面接受事件，或者要求浏览器从Web服务器获取其它数据。
JavaScript如何与页面交互？
JavaScript是代码，HTML是标记，完全不同的东西
怎么让它们交互呢？
答案是使用文档对象模型（Docunment Object Model，简称DOM）。
DOM的妙处在于：它能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。
1、在浏览器加载一个页面时，浏览器会解析HTML，并创建文档的一个内部模型，其中包含HTML标记的所有元素。
2、JavaScript可以与DOM交互（JavaScript使用DOM创建或删除元素等等）
document是一个反映HTML的对象，通过调用document的方法改变DOM的状态，也就是改变HTML页面
3、JavaScript修改了DOM时，浏览器会随着动态更新页面。
