浏览器中的 DOM 和 DEM

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() 是否被调用过。