Document Object Model (DOM) 文档对象模型
DOM 是 Web 页面（HTML 文档）的编程接口，它描述了文档的结构，代表了页面的众多对象组成。并且提供了方式可以读取、修改页面结构、样式和内容。
DOM 将 Web 页面组织成一个节点和对象，它是 Web 开发的关键工具之一。使得程序语言（一般指 JavaScript）可以经过 DOM 和 Web 页面连接起来。
我们把一个Web 页面称作 HTML 文档，这个文档在计算机中以 HTML 源代码存储。 但浏览器在解析 HTML 源代码时，以 DOM 的形式表现，并提供给开发者操控 DOM 的功能。
DOM 提供了一系列对象都有属性和方法，当你修改或调用它们时，浏览器会响应这些改动并更新到 Web 页面上。
DOM 含有什么内容？
一般的浏览器实现 DOM 都包含下列的对象，在开发 Web 应用程序时，通常使用的是 Document 和 window 对象。
- document 对象，常用的有
document.getElementById(id) - element 对象，常用的有
element.innerHTML - window 对象，常用的有
window.location - screen 对象，常用的有
screen.width - CSS 样式属性
- 事件模型 DEM(DOM Event Model)
使用 Javascript 和 DOM 在页面中创建内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.onload = function () {
heading = document.createElement("h1");
heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</body>
</html>DOM Event Model (DEM) 文档事件模型
有了事件，开发者就可以处理用户与浏览器内容之间的交互，比如敲击键盘、点击鼠标，从而改变文档内容。
监听事件
一般情况下都可以为页面上的元素添加事件监听器，完成自定义的动作：
myButton.addEventListener('click', greet, false);
function greet(event) {
console.log('greet: ' + arguments);
alert('Hello world');
}EventTarget.addEventListener() 方法将指定的函数绑定到 EventTarget 对象上，该对象触发了指定事件时，绑定的函数就会被执行。
EventTarget 可以是页面上的元素，文档，和视窗（ Element、Document、Window）。
事件流
如 W3C 规范的事件流所示，一个事件的生命周期包括：捕捉、目标和冒泡三个阶段。
捕捉（红色）阶段，事件从文档树的顶端传播到目标元素。浏览器会沿着当前文档的树结构，找出事件涉及的元素，它就是事件的目标。
textblock.addEventListener('mouseout', handleDescendantMouseEvent, true)addEventListener 第三个参数为 true 时，元素的事件将会在捕捉阶段发生。
使用 event.stopPropagation() 方法可以在捕捉阶段阻止事件传播到目标元素。
目标（蓝色）阶段，完成捕捉阶段后，浏览器会触发目标元素上任何已添加的事件。
冒泡（绿色）阶段，完成目标阶段后，浏览器开始沿着上级元素链向文档顶部前进，途径的没有启用捕捉的事件，都会被触发。
textblock.addEventListener('mouseout', handleDescendantMouseEvent, false)addEventListener 第三个参数为 false 时，元素的事件将会在捕捉冒泡发生。
撤销默认行为
浏览器提供的可交互的组件，比如输入框、按钮、超链接，都具备默认行为，对应的事件就会被触发。
event.preventDefault()在 Event.defaultPrevented 属性可得 preventDefault() 是否被调用过。