在一个html页面中，会使用很多标签来规划制作页面。
每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找 到这个标签元素
如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一 片叶子，应该怎么做？
“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一 片叶子都不是难事了
叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”。
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节 点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
在节点树中，顶端节点就是根节点（root）
每个节点都有父节点（除了根节点）
任何一个节点都可以拥有任意数量的子节点
同胞是拥有相同父节点的节点
<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>节点
并且：
节点拥有两个子节点： <head>和<body>
<head>节点拥有两个子节点：<meta> 与 <title> 节点
<title>节点也拥有一个子节点：文本节点 "DOM 教程"
<h1>和<p>节点是同胞节点，同时也是<body> 的子节点
并且：
<head>元素是 <html>元素的首个子节点
<body>元素是 <html> 元素的最后一个子节点
<h1>元素是<body>元素的首个子节点
<p>元素是 <body>元素的最后一个子节点
js为我们提供了很多种方法来实现在页面找查找某个元素节点