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节点来表示的。
<h1 class="intro">Introducing the Widget Company</h1>在上面这个代码中 h1就是一个Dom中的element node（元素节点）Introducing the widget 就是一个Dom中的text node（文本节点） class就是一个attribute node（属性节点）。
Dom tree （Dom 树）
在Dom中，整个页面是以树的结构来展示的。举个例子，这里有一段代码以及他在Dom中的结构展示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Web Page</title>
</head>
<body>
<h1 class="intro">The Widget Company</h1>
</body>
</html>上面的这段代码在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来访问或修改元素。
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
