Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。

元素节点的nodeType属性都是1。

1
2
3

var p = document.querySelector("p");
p.nodeName; // "P"
p.nodeType; // 1

Element对象继承了Node接口，因此Node的属性和方法在Element对象都存在。此外，不同的 HTML 元素对应的元素节点是不一样的，浏览器使用不同的构造函数，生成不同的元素节点，比如<a>元素的节点对象由HTMLAnchorElement构造函数生成，<button>元素的节点对象由HTMLButtonElement构造函数生成。因此，元素节点不是一种对象，而是一组对象，这些对象除了继承Element的属性和方法，还有各自构造函数的属性和方法。

实例属性

概述

document对象是文档的根节点，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。

document对象有不同的办法可以获取。

• 正常的网页，直接使用document或window.document。
• iframe框架里面的网页，使用iframe节点的contentDocument属性。
• Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
• 内部节点的ownerDocument属性。

document对象继承了EventTarget接口、Node接口、ParentNode接口。这意味着，这些接口的方法都可以在document对象上调用。除此之外，document对象还有很多自己的属性和方法。

浏览器支持大量的事件，本章介绍其中一些主要的事件。

鼠标事件

鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。

• click：按下鼠标（通常是按下主按钮）时触发。
• dblclick：在同一个元素上双击鼠标时触发。
• mousedown：按下鼠标键时触发。
• mouseup：释放按下的鼠标键时触发。
• mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。
• mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。
• mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）。
• mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）。
• mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）。
• contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
• wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口。

click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。

概述

<img>元素用于插入图片，主要继承了 HTMLImageElement 接口。

浏览器提供一个原生构造函数Image，用于生成HTMLImageElement实例。

1
2
3

var img = new Image();
img instanceof Image; // true
img instanceof HTMLImageElement; // true

Image构造函数可以接受两个整数作为参数，分别表示<img>元素的宽度和长度。

事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章介绍 DOM 的事件编程。

EventTarget 接口

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。

该接口主要提供三个实例方法。

• addEventListener：绑定事件的监听函数
• removeEventListener：移除事件的监听函数
• dispatchEvent：触发事件

概述

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。

这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入 1000 个<p>元素，就会连续触发 1000 个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在 1000 个段落都插入结束后才会触发，而且只触发一次。

Mutation Observer 有以下特点。

Text 节点的概念

文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。

通常我们使用父节点的firstChild、nextSibling等属性获取文本节点，或者使用Document节点的createTextNode方法创造一个文本节点。

1
2
3
4
5
6

// 获取文本节点
var textNode = document.querySelector("p").firstChild;

// 创造文本节点
var textNode = document.createTextNode("Hi");
document.querySelector("div").appendChild(textNode);

浏览器原生提供一个Text构造函数。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。

基本概念

DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。

安装

1

npm install javascript-obfuscator -g

安装完成后，javascript-obfuscator 就是一个独立的可执行命令了。

1

javascript-obfuscator -v

可以查看版本号，检测安装是否成功。

模块化是指将一个复杂的系统分解为多个模块以方便编码。
当项目变得越来越大的时候，原来的引入方式会越来越臃肿，难以维护。
所以在这里需要用模块化的思想来组织代码。目前流行的 前端模块化规范有 CommonJs、AMD、CMD、ES6

CommonJS

CommonJs 是一种被广泛使用的 JavaScript 模块化规范，其核心思想是通过 require 方法来同步加载依赖的其他模块，通过 module.exports 导出需要暴露的接口。它的流行得益于 Node.js 采用了这种方式，后来这种方式就被引入到了 网页开发之中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let num1 = 0;
function add(a, b) {
  return a + b;
}

module.exports = {
  add,
  num1
};
// 导入自定义的模块时，参数包含路径，可省略.js
const moduleA = require("./modul_demo");
moduleA.add(2, 1);

// 在 node 中，引用其核心模块，则不需要带路径
let fs = require("fs");
let data = fs.readFileSync("./modul_demo.js");
data.toString();

特点