相信很多初学前端的小伙伴，学了html,css,js之后，欣喜之余还有一丝小傲娇，没有想到那些大佬们口中又 提到了DOM树。你两眼一抹黑，年轻人总是要接受社会的爱(du)护(da)。
DOM 是 Document Object Model（文档对象模型）的缩写。
为了那些被dom支配的日子，为了祖国的大好河山，为了下半辈子的幸福....
所以我们来谈谈什么是dom.
举个例子
我们日常生活中，经常会遇到一些写文档的工作，写一个论文.docx，等等。我们可以改文本的字号，添加标题，增加内容，改变页眉页脚……
但在我们初期写html页面时，一旦代码确定，那么页面的整体显示就会确定下来！打开浏览器浏览你的页面，内心细腻的你，发现一处<p>我喜欢吃藕！</p>，但你明明想写的是"我喜欢吃"。那我们怎么办呢？我们吭哧吭哧的回到你的html文件，改了那段文本标签。
你想，我要是能在浏览页面时像写.docx那样随便改文档就好了。正在你冥思苦想之际......
大佬们已经帮你想好了！
当你的服务器把html网页发送给用户时，用户的浏览器会解析你的html代码，生成dom树，css则会生成css规则树。有了这两个树，你的浏览器就可以渲染了！所有最终呈现的页面都是由你的浏览器渲染生成的，这也是为什么我们在检查页面时(f12),对内容的修改会直接反应到页面上。你为她画了晓妆，你给她改了晚妆。
这个dom树有一个根节点<html>标签，由这个根，你的每一个<meta>标签，<p>标签，<title>,<h1>等等，以及他们的文本内容，在上面生长，我们可以很轻松的在这颗树上定位到他们的位置！这是给门牌号啊。这是数据的结构啊。
可上面说的明明是文档对象！
dom对象，在树形结构中，我们可以轻松定位到对应的标签位置，文本位置！
同时给大家提供了对这个结构修改-内容修改的内置函数，这也是对象模型的核心！
提供了哪些方法呢？无非就是，四大计算机古典名著《增》《删》《改》《查》。
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
.etc
这就跟js联系到了一起吧！有木有？
我们先看一个简单的例子。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() { document.getElementById("p1").innerHTML = "我喜欢吃";
}
</script>
</head>
<body>
<p id="p1">我喜欢吃藕</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
</script>
<p>上面的段落被一段脚本改变了。</p>
</body>
</html>
呃呃呃，有了dom给你的文本定位，你拿到了p1家的门钥匙，月黑风高，你偷走了p1的藕……
id的添加是为了更好的定位，正是有了dom对象，这段js可以利用dom对象的方法，对dom树的内容进行修改。
于是乎我们可以在页面上通过js修改任何东西了。包括文本内容，层叠样式。
基于dom，利用js编程，我们可以让用户"动态的修改页面内容"，也可以和服务器相连"面对不同的人显示不同的数据"。
所以建议学习的顺序是学完js再对底层的dom有一个理解。
参考文档：
W3school DOM
原文：https://www.cnblogs.com/asmurmur/p/14773022.html