JavaScript DOM 对象
DOM，全称 “Document Object Model（文档对象模型）”，它是由 W3C 定义的一个标准。
在实际开发中，我们有时候需要使用 JavaScript 来实现鼠标移到某个元素上面时就改变颜色，或者动态添加元素、删除元素等。其实这些效果就是通过 DOM 提供的方法来实现的。
简单来说，DOM 里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。
用一句话总结，就是：DOM 操作就是 “元素操作” 。DOM 提供了一整套 “工具”（也就是很多属性和方法），我们通过这些工具就可以获取、修改、添加或删除页面中的任何元素。
JavaScript DOM 结构
浏览器加载一个 HTML 页面时，它会把整个页面解析成一个有组织、有层级的结构，就像是一棵 “倒过来的树” 一样，我们称之为 “DOM 树”。
DOM 采用的是 “树形结构”，用 “树节点” 形式来表示页面中的每一个元素。我们先看下面一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>绿叶网</h1>
<p>绿叶网是一个……</p>
<p>绿叶网成立于……</p>
</body>
</html>对于上面这个 HTML 文档，DOM 会将其解析为如下图所示的树形结构。
是不是很像一棵倒挂的树呢？其实，这也叫做 “DOM 树”。在这棵树上，html 元素是树根，也叫根元素。
接下来深入一层，我们发现有 head 和 body 这两个分支，它们位于同一层次上，并且有着共同的父节点（即 html），所以它们是兄弟节点。
head 有两个子节点：title、meta（这两个是兄弟节点）。body 有 3 个子节点：h1、p、p。当然，如果还有下一层，我们还可以继续找下去。
利用这种简单的 “家谱关系”，我们可以把各节点之间的关系清晰地表达出来。那么为什么要把一个 HTML 页面用树形结构表示呢？这也是为了更好地给每一个元素进行定位，以便让我们找到想要的元素。
每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话对理解 DOM 操作太重要了）。
