原文章出处 此处仅做翻译https://www.elated.com/javascript-dom-intro/https://www.elated.com/javascript-dom-intro/https://www.elated.com/javascript-dom-intro/
(大多国内讲解晦涩，英文原版文档通俗浅显)
Dom (document Object Model)？从javascript的角度来看，Dom就是操作javascript中的对象来表示我们所看到的web页面中各个组成部分。举个例子，一个完整的页面是由document对象来呈现，同时页面中的元素--比如body，h1，p等都是由Element对象来呈现。整个页面是以一个以document对象为顶点（也就是树中根节点位置）的树来呈现的。（意思就是说：浏览器加载页面时，会将HTML文件转化成一个Dom，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点）
元素，属性以及文文节点（Element，attribute and text node）一个网页中的每一个部分都是由一个节点所构成，我们所遇到最常见的就是element，attribute，text节点。另外，整个document（上文所说的那个表示整个页面的document对象）是由document节点来表示的。
Introducing the Widget Company
在上面这个代码中 h1就是一个Dom中的element node（元素节点）Introducing the widget 就是一个Dom中的text node（文本节点） class就是一个attribute node（属性节点）。
Dom tree （Dom 树）在Dom中，整个页面是以树的结构来展示的。举个例子，这里有一段代码以及他在Dom中的结构展示。
My Web Page
The Widget Company
上面的这段代码在Dom中的树状结构如下：
document
|
HTML
______________|______________
| |
HEAD BODY
| |
TITLE H1
| |
"My Web Page" "The Widget Company"
document是一个Dom的document节点，同时HTML、HEAD、BODY、TITLE、H1都是元素节点（Element node），“My web page”和“The Widget Company”是文本节点（text node）。
同时H1有一个名字为“class”、属性为“intro”的属性节点与之相连。
Html节点也有多个属性节点和他相连，分别为 xmlns value=“”，等等。（类似h1）.
总结（此处非翻译自原文）1：dom树就是把一个页面中的不同元素作为对象放入一个以document为根节点的树状结构中。
2：html中有层级结构，比如head标签中包括title标签，body标签中包含h1标签，这样的层级结构也反映在Dom树中。
3：这种结构可以使我们通过document来访问或修改元素。
