【轻聊前端】强大的DOM（上）

在系列的第一篇文里，我们说了“编程”是什么，而Web编程自然需要两个元素都在——’编程‘、’Web‘。

前面已经聊了"编程"的若干元素。

• “变量”，用于存储数据；
• “对象”，用于封装数据；
• “数组”，用于存储一组（常为同类）数据；
• “函数”，用于封装行为。

作为程序，这些就够了，但很多人从学习JavaScript到写web页面都会有个坎——“学会了语法，写网页从何处下手？”。

要使编码能够实际作用于网页，和网页进行交互，还需要另外两样东西：DOM 和 BOM。

JavaScript = ES + DOM + BOM。

BOM——浏览器对象模型（Browser Object Model）、DOM——文档对象模型（Document Object Model）。

BOM用于承载网页，DOM用于展示网页。

本文的主角就是 DOM。

什么是 DOM

从表现看，它决定了网页中的内容；从编码看，它包含了属性和能力。

前一种很好理解，后面一种也似曾相识，这不就是对象？所以，DOM就是网页结构和编程接口的结合体。

有一点要说明的是，尽管上面提了 JavaScript 的等式，但 DOM 并不专属于 JavaScript，而是跨平台、语言无关的。之所以跟 JavaScript 产生关联，是因为 JavaScript 中提供了 DOM API。

任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构。节点分很多类型，每种类型对应不同的信息或标记，也都有自己的特性、数据和方法，而且与其他类型有某种关系，这些关系构成了层级，让标记可以表示为一个以特定节点为根的树形结构。就是常说的DOM树了。

DOM很强大，但在很长一段时间里都令人头疼，使用繁琐、版本多、兼容难、性能损耗大...给人的印象就是，DOM是原始且不好的东西，最好敬而远之。

所以，大家谈论比较多的是怎样”减少“跟原生DOM打交道，比如几年前的Jquery/Zepto，近几年的Vue、React。前者对DOM操作进行了很好地兼容和封装，使用更方便，后者则引入”虚拟DOM“和更合理的diff算法，代码中极力避免直接操作DOM，而是操作数据，框架根据数据变化来处理从”虚拟DOM“到”真实DOM“的转换。

但是，这并不代表不需要DOM，更不是人们忽略它的理由，甚至有些场景下操作DOM是唯一途径，所以，熟练掌握DOM相关的知识依旧是现代前端开发应该做到的。

Document

在浏览器中，文档对象document表示整个HTML页面，它是window对象的属性，是一个全局对象。

文档信息

document对象包含一些页面共有信息，如：URL、domain和referrer。

• URL：当前页面的完整URL
• domain：页面的域名
• referrer：链接到当前页面的那个页面的URL。如果当前页面没有来源，则referrer属性是空字符串。

这些信息都可以在请求的HTTP头部信息中获取，只是在JavaScript中通过这几个属性暴露出来而已。

其中只有domain属性是可以设置的。但出于安全考虑，不能设置URL中不包含的值。

当页面中包含来自不同子域的或内嵌