持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 11 天，点击查看活动详情
如何理解 DOM
DOM(Document Object Modal)，DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口
Document 对象，每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
在一个html页面中，会使用很多标签来规划制作页面。
每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素。
如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一片叶子，应该怎么做？
“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了
叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”。
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了。
-
在节点树中，顶端节点就是根节点（root）；
-
每个节点都有父节点（除了根节点）；
-
任何一个节点都可以拥有任意数量的子节点；
-
同胞是拥有相同父节点的节点。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> DOM 操作</title>
</head>
<body>
<h1>第一节：HTML DOM</h1>
<p>Hello world!</p>
</body>
</html>
从上面的 HTML 中：
<html>节点没有父节点；它是根节点;<head>和<body>的父节点是<html>节点;- 文本节点 "Hello world!" 的父节点是
<p>节点; <html>节点拥有两个子节点：<head>和<body>;<head>节点拥有两个子节点：<meta>与<title>节点;<title>节点也拥有一个子节点：文本节点 "DOM 教程"<h1>和<p>节点是同胞节点，同时也是<body>的子节;点;<head>元素是<html>元素的首个子节点<body>元素是 元素的最后一个子节点<h1>元素是<body>元素的首个子节点<p> 元素是` 元素的最后一个子节点
