各位小伙伴，大家好，欢迎收看web二系列课程，今天我们来学习第七章，DOM 模型。
在讲 DOM 模型之前呢，我们先来回顾一下上节课讲的 BOM 模型。通过上节课的学习我们知道：BOM是操作浏览器窗口等一些相关操作的接口。document对象，可以获得一些特定的标签并且对其进行操作。但是呢，它有这样两个不足之处，一个是只能获得特定标签，不能获得HTML中的任意标签，如<div>标签;而且通过数组索引的方式获得特定的标签，很不方便维护。
那我们就想是不是有一种更好的方法来方便的操作 HTML 文档呢？能够动态的修改文档内容？那，就是今天的主角，DOM。下面我们一起来认识一下它。
本节课共有三小节内容，分别是 DOM 简介，DOM 树和 DOM 节点，以及访问 DOM 节点。
下面一起来认识一下DOM吧。
DOM，全称是 Document Object Model，文档对象模型。是浏览器提供的操作HTML文档内容的应用程序接口。它的作用是用于对文档进行动态操作，如增加文档内容、删除文档内容、修改文档内容等所有的操作都可以。
而且 DOM 的应用也十分广泛，在现今的各种网页特效中都有 DOM 的踪影。等大家学习后就会知道它的应用到底有多广泛了。（或者这儿可以让有经验的给你说说啊）
好了，下面我们来深入认识一下 DOM 吧。来看第二小节的内容：DOM 树和 DOM 节点。
DOM 将 HTML 文档抽象为树形结构，我们称这棵树为 DOM 树。既然这里用到了树的概念，那这可树就一定有节点，而HTML 中的每一项内容（包括标签和内容）都可以在 DOM 树中找到。因为每个树枝不是腾空的，都是生长在大树上面的，都是有根可寻的。而 DOM 的核心就是对 DOM 树的各种操作，这些操作也就是 增加，删除，修改 DOM 树中的内容。
例如下面这是一个结构简单的 HTML 文档。而且也符合文档缩进的规范。那我们刚刚说 DOM 就是把HTML文档抽象为树的形象，那看看这个文档对应的 DOM 树是什么样子的。
哇，我们看到这棵树一共有四层节点，最上面的节点是 HTML 标签，也就是 HTML 文档中最外层的 HTML 标签。树的第二层是 head 标签和 body 标签，head 标签下面又包含了 meta 标签和 title 标签。body 标签中包含了。。。最后一层是。。。
那对于 DOM 树和 DOM 节点我们需要了解这些问题，需要讨论这些问题：首先，DOM 节点是一个对象，它有属性和方法。DOM 节点之间有特定关系，有父子兄弟的关系。那么现在看来， DOM 节点核心问题有以下几点：如何获取一个节点？如何访问对象之间的依赖关系？如何动态添加、删除、更新一个节点？
好，那我们先来看一下节点之间的层次关系都有哪些？首先在整个树中，最顶端的那个节点被称为根。下面从节点之间的关系来看，一共有三种节点：分别是父节点，子节点和同胞节点。父节点，每个节点都有父节点，除了根节点，对吧，根节点是最顶端的节点了，他没有上一级节点了，所以也就没有父节点；子节点，每个元素节点可以有0个，1个或者多个子节点。0个当然就是没有啦，也就是说它就是最后一层节点了。同胞节点，指拥有相同父节点的节点。这个其实都挺好理解的。由于树状结构在生活中以及各个科学领域的应用都十分广泛，所以也好理解，而且在它的命名都是仿照我们人类的亲属关系来命名的。
我们可以通过这些图，更加清晰的理解 DOM 树的结构。。。
我们已经知道了一个 DOM 节点其实就是一个对象，拥有属性和方法。属性是节点的值，可以获取到或者对这个值进行设置。方法是可以在节点上执行的动作。
既然可以获取或设置，那下面我们就看看如何访问 DOM 节点。获取 DOM 节点一共有两种方法，一种是直接获取节点，一种是通过节点之间的关系来获取到我们想要的节点。直接获取一共又分为三种情况，分别是通过 id 属性获得节点，通过 标签名获得，通过样式名获得。如果是通过节点关系呢，也是三种情况，分别是通过父节点获得子节点，通过子节点获得父节点，还有获得前后兄弟节点。
下面我们就一一来了解每一种方法的具体使用，如何用呢？首先来看直接获取的三种情况。。。
好了，我们现在可以获取到DOM中的每一个元素了，然而这样就结束了吗？没有，我们只是获得到了一个对象，要想修改它的属性，就要再访问到它的属性，它的属性的访问有两种方法，一种是标准方法，一种是简单方法。我们来看。。。
要想修改某元素的某属性值，直接赋值就OK了。
下面我们来看一个特殊分子：innerHTML。为什么说它特殊呢，因为它被使用的频率很高，我们经常见他，也经常用它。