DOM 英文全称 Document Object Model 即文档对象模型。

每个web页面都驻留在一个浏览器窗口中，可以将其视为一个对象。
文档对象表示在该窗口中显示的HTML文档。

文档对象具有引用其他对象的各种属性，这些对象允许访问和修改文档内容。
访问和修改文档内容的方式称为文档对象模型，或DOM。

JavaScript WEB文档中对象的结构

对象按照层次结构组织。
这种层次结构适用于Web文档中对象的组织。

窗口对象——层次结构的顶部。
它是对象层次结构的最外层元素。

文档对象——加载到窗口中的每个HTML文档都成为文档对象。
文档包含页面的内容。

表单对象——包含在标记<Form>…</form>的一切构成form对象。

表单控件元素——表单对象包含为该对象定义的所有元素，如文本字段、按钮、单选按钮和复选框。

DOM类别

有几种不同的DOM存在：
下面的部分详细解释每个dom，并描述如何使用它们访问和修改文档内容。

The Legacy DOM这是在早期版本的JavaScript语言中引入的模型。
它得到了所有浏览器的良好支持，但只允许访问文档的某些关键部分，如表单、表单元素和图像。

The W3C DOM该文档对象模型允许访问和修改所有文档内容，并由万维网联盟(W3C)标准化。
几乎所有的现代浏览器都支持这个模型。

The IE4 DOM这个文档对象模型是在微软ie浏览器的第4版中引入的。
IE 5和后续版本包括了对大多数基本W3C DOM特性的支持。

DOM兼容性

如果你想要写一个脚本的灵活性,使用W3C DOM还是IE 4 DOM取决于它们是否可用,
那么我们可以使用一个性能测试的方法,
首先检查存在的方法或属性,以确定浏览器有你需要的功能。

if (document.getElementById) {
   // 如果W3C的方法存在，则使用它
} else if (document.all) {
   // 如果all[]存在，就使用它
} else {
   // 否则使用legacy DOM
}

正因为不同DOM可能不支持某个功能，或者功能的效果不一样，或者浏览器上的实现方式不同。
导致早期写js程序的时候，需要针对不同的浏览器修补代码。
所以就有了大名鼎鼎的jQuery，通过抽象化浏览器之间的差异， 减少了前端程序员的痛苦。