Event 对象
概述
事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。
Event对象本身就是一个构造函数，可以用来生成新的实例。
1event = new Event(type, options);
Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。
12345678var ev = new Event( 'look', { 'bubbles': true, 'cancelable' ...
事件模型
监听函数
浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。
JavaScript 有三种方法，可以为事件绑定监听函数。
HTML 的 on- 属性
HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。
12<body onload="doSomething()"><div onclick="console.log('触发事件')">
上面代码为body节点的load事件、div节点的click事件，指定了监听代码。一旦事件发生，就会执行这段代码。
元素的事件监听属性，都是on加上事件名，比如onload就是on + load，表示load事件的监听代码。
注意，这些属性的值是将会执行的代码，而不是一个函数。
12345<!-- 正确 --><body onload="doSomething()"> ...
EventTarget 接口
事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM
支持大量的事件，本章开始介绍 DOM 的事件编程。
介绍具体的事件之前，先来看看如何让 DOM 节点监听事件。
概述
DOM
节点的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。
该接口主要提供三个实例方法。
addEventListener()：绑定事件的监听函数
removeEventListener()：移除事件的监听函数
dispatchEvent()：触发事件
EventTarget.addEventListener()
EventTarget.addEventListener()用于在当前节点或对象上（即部署了
EventTarget
接口的对象），定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。
1target.addEventListener(t ...
Mutation Observer API
概述
Mutation Observer API 用来监视 DOM 变动。DOM
的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API
都可以得到通知。
概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation
Observer
事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM
的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM
的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。
这样设计是为了应付 DOM
变动频繁的特点。举例来说，如果文档中连续插入1000个<p>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而
Mutation Observer
完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。
Mutation Observer 有以下特点。
它等待所有脚本任务完成后，才会运行（即异步触发方式）。
它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个 ...
CSS 操作
CSS 与 JavaScript
是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本章介绍如何通过
JavaScript 操作 CSS。
HTML 元素的 style 属性
操作 CSS
样式最简单的方法，就是使用网页元素节点的getAttribute()方法、setAttribute()方法和removeAttribute()方法，直接读写或删除网页元素的style属性。
1234div.setAttribute( 'style', 'background-color:red;' + 'border:1px solid black;');
上面的代码相当于下面的 HTML 代码。
1<div style="background-color:red; border:1px solid black;" />
style不仅可以使用字符串读写，它本身还是一个对象，部署了
CSSStyl ...
Text 节点和 DocumentFragment
节点
Text 节点的概念
文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。
通常我们使用父节点的firstChild、nextSibling等属性获取文本节点，或者使用Document节点的createTextNode方法创造一个文本节点。
123456// 获取文本节点var textNode = document.querySelector('p').firstChild;// 创造文本节点var textNode = document.createTextNode('Hi');document.querySelector('div').appendChild(textNode);
浏览器原生提供一个Text构造函数。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。
12345// 空字符串var text1 = new Text();/ ...
属性的操作
HTML
元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。
123<a id="test" href="http://www.example.com"> 链接</a>
上面代码中，a元素包括两个属性：id属性和href属性。
属性本身是一个对象（Attr对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（HTMlElement对象）来操作属性。本章介绍如何操作这些属性。
Element.attributes 属性
元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有attributes属性，但返回的都是null，因此可以把这个属性视为元素对象独有的。
单个属性可以通过序号引用，也可以通过属性名引用。
12345// HTML 代码如下// <body bgcolor="yellow" onload="" ...
Element 节点
简介
Element节点对象对应网页的 HTML 元素。每一个 HTML
元素，在 DOM
树上都会转化成一个Element节点对象（以下简称元素节点）。
元素节点的nodeType属性都是1。
123var p = document.querySelector('p');p.nodeName // "P"p.nodeType // 1
Element对象继承了Node接口，因此Node的属性和方法在Element对象都存在。
此外，不同的 HTML
元素对应的元素节点是不一样的，浏览器使用不同的构造函数，生成不同的元素节点，比如<a>元素的构造函数是HTMLAnchorElement()，<button>是HTMLButtonElement()。因此，元素节点不是一种对象，而是许多种对象，这些对象除了继承Element对象的属性和方法，还有各自独有的属性和方法。
实例属性
元素特性的相关属性
（1）Element.id
Element.id属性返回指定元素的id属性，该属性可读写。
123// H ...
Document 节点
概述
document节点对象代表整个文档，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入
HTML 文档，该对象就存在了，可以直接使用。
document对象有不同的办法可以获取。
正常的网页，直接使用document或window.document。
iframe框架里面的网页，使用iframe节点的contentDocument属性。
Ajax
操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
内部节点的ownerDocument属性。
document对象继承了EventTarget接口和Node接口，并且混入（mixin）了ParentNode接口。这意味着，这些接口的方法都可以在document对象上调用。除此之外，document对象还有很多自己的属性和方法。
属性
快捷方式属性
以下属性是指向文档内部的某个节点的快捷方式。
（1）document.defaultView
document.defaultView属性返回document对象所属的wi ...
ParentNode 接口，ChildNode
接口
节点对象除了继承 Node
接口以外，还拥有其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。
ParentNode 接口
如果当前节点是父节点，就会混入了（mixin）ParentNode接口。由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会拥有ParentNode接口。
ParentNode.children
children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。该属性只读。
下面是遍历某个节点的所有元素子节点的示例。
123for (var i = 0; i < el.children.length; i++) { // ...}
注意，children属性只包括元素子节点，不包括其他类型的子节点（比如文本子节点）。如果没有元素类型的子节点，返回值HTMLCol ...