Mather Blog

浏览器中的 DOM 和 DEM

默认分类 0 评

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

参考

有用但不愿意使用的机制 — JavaScript 作用域

发表评论
撰写评论