前言

用框架久了，猛然发现很久没用过DOM，脑海里对DOM就剩下“操作命令繁多”的印象，复盘曾经的DOM笔记，才发现其实没那么复杂。

关于DOM的介绍

网页被加载时，浏览器会创建页面的文档对象模型，通过 HTML DOM 就可以访问文档里的元素，相当于通过DOM将页面和脚本连接起来。

通过DOM，能够将页面文档转换为JS对象，通过操作对象，就能对页面内容进行动态操作（可以随意改变内容树）。

节点类型

HTML页面呈现树状结构，每个内容都对应“节点”，可通过element.nodeType 获取节点类型。通过该方法返回的值就能对应上节点类型：

//element.nodeType 返回值以及对应含义：
1：元素节点
2：属性节点
3：文本节点（包括空格和换行）
8：注释节点
9：文档节点

DOM集合与节点列表

DOM操作

关于DOM的操作指令，在这里我想记录曾经自己的一个误区，那就是习惯在笔记上把指令写得很详细，如：

//向新元素添加节点
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
//替换节点
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

当然，这肯定是没错的，也很详细，就差把div1和p1对应哪行html写出来了。但是其实我想记录的最关键的指令是替换节点的 replaceChild，就此而已。

这会带来什么问题呢？那就是为了一个关键指令，写下很多行代码，看似清晰明了，实则日后回忆起来，对DOM的记忆只剩下了模模糊糊的“有超级多的指令，我都想不起来了，DOM的内容我可能就是完全攻克不了吧”。

所以，其实只要记下关键指令就ok了！而且这些单词一眼就能够看出来是什么意思，甚至中文备注都不需要。日后再回想起来，常用的指令合起来都没巴掌那么大，会自信很多。

以下是我总结的常用指令关键词：

备注： document.xxx  表示对整个文档里操作，常用来操作节点。 element.xxx 表示对节点操作，即先获取到对应的节点，才进行操作。

其实一张图就能够记录下常用指令，而且从单词就能很清晰的看出使用的场合，对吧？

事件

除了DOM的操作指令外，最重要的就是事件部分了。不知道会不会有人和曾经的我一样，觉得光是事件绑定就有很多方法，总觉得拿捏不完全，其实列举出来，和DOM指令一样，也不过一张图就能解决问题。

最后

分享一些自己复盘DOM的感悟。

有的事情可以很复杂，比如上述三张图的内容，扩展开讲也能有几千字；但其实有的事情也可以很简单，精简下来，会发现一切清晰明了很多。