Event 对象概述事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。Event对象本身就是一个构造函数，可以用来生成新的实例。event = new Event(type, options);Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev);上面代码新建一个look事件实例，然后使用dispatchEvent方法触发该事件。注意，如果不是显式指定bubbles属性为true，生成的事件就只能在“捕获阶段”触发监听函数。// HTML 代码为 // Hello var div = document.querySelector('div'); var p = document.querySelector('p'); function callback(event) { var tag = event.currentTarget.tagName; console.log('Tag: ' + tag); // 没有任何输出 } div.addEventListener('click', callback, false); var click = new Event('click'); p.dispatchEvent(click);上面代码中，p元素发出一个click事件，该事件默认不会冒泡。div.addEventListener方法指定在冒泡阶段监听，因此监听函数不会触发。如果写成div.addEventListener('click', callback, true)，那么在“捕获阶段”可以监听到这个事件。另一方面，如果这个事件在div元素上触发。div.dispatchEvent(click);那么，不管div元素是在冒泡阶段监听，还是在捕获阶段监听，都会触发监听函数。因为这时div元素是事件的目标，不存在是否冒泡的问题，div元素总是会接收到事件，因此导致监听函数生效。实例属性Event.bubbles，Event.eventPhaseEvent.bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性，一般用来了解 Event 实例是否可以冒泡。前面说过，除非显式声明，Event构造函数生成的事件，默认是不冒泡的。Event.eventPhase属性返回一个整数常量，表示事件目前所处的阶段。该属性只读。var phase = event.eventPhase;Event.eventPhase的返回值有四种可能。0，事件目前没有发生。1，事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中。2，事件到达目标节点，即Event.target属性指向的那个节点。3，事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中。Event.cancelable，Event.cancelBubble，event.defaultPreventedEvent.cancelable属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性，一般用来了解 Event 实例的特性。大多数浏览器的原生事件是可以取消的。比如，取消click事件，点击链接将无效。但是除非显式声明，Event构造函数生成的事件，默认是不可以取消的。var evt = new Event('foo'); evt.cancelable // false当Event.cancelable属性为true时，调用Event.preventDefault()就可以取消这个事件，阻止浏览器对该事件的默认行为。如果事件不能取消，调用Event.preventDefault()会没有任何效果。所以使用这个方法之前，最好用Event.cancelable属性判断一下是否可以取消。function preventEvent(event) { if (event.cancelable) { event.preventDefault(); } else { console.warn('This event couldn\'t be canceled.'); console.dir(event); } }Event.cancelBubble属性是一个布尔值，如果设为true，相当于执行Event.stopPropagation()，可以阻止事件的传播。Event.defaultPrevented属性返回一个布尔值，表示该事件是否调用过Event.preventDefault方法。该属性只读。if (event.defaultPrevented) { console.log('该事件已经取消了'); }Event.currentTarget，Event.target事件发生以后，会经过捕获和冒泡两个阶段，依次通过多个 DOM 节点。因此，任意事件都有两个与事件相关的节点，一个是事件的原始触发节点（Event.target），另一个是事件当前正在通过的节点（Event.currentTarget）。前者通常是后者的后代节点。Event.currentTarget属性返回事件当前所在的节点，即事件当前正在通过的节点，也就是当前正在执行的监听函数所在的那个节点。随着事件的传播，这个属性的值会变。Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。这个属性不会随着事件的传播而改变。事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的。// HTML 代码为 // Hello World function hide(e) { // 不管点击 Hello 或 World，总是返回 true console.log(this === e.currentTarget); // 点击 Hello，返回 true // 点击 World，返回 false console.log(this === e.target); } document.getElementById('para').addEventListener('click', hide, false);上面代码中，是 的子节点，点击或者点击 ，都会导致监听函数执行。这时，e.target总是指向原始点击位置的那个节点，而e.currentTarget指向事件传播过程中正在经过的那个节点。由于监听函数只有事件经过时才会触发，所以e.currentTarget总是等同于监听函数内部的this。Event.typeEvent.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候指定的。该属性只读。var evt = new Event('foo'); evt.type // "foo"Event.timeStampEvent.timeStamp属性返回一个毫秒时间戳，表示事件发生的时间。它是相对于网页加载成功开始计算的。var evt = new Event('foo'); evt.timeStamp // 3683.6999999995896它的返回值有可能是整数，也有可能是小数（高精度时间戳），取决于浏览器的设置。下面是一个计算鼠标移动速度的例子，显示每秒移动的像素数量。var previousX; var previousY; var previousT; window.addEventListener('mousemove', function(event) { if ( previousX !== undefined && previousY !== undefined && previousT !== undefined ) { var deltaX = event.screenX - previousX; var deltaY = event.screenY - previousY; var deltaD = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)); var deltaT = event.timeStamp - previousT; console.log(deltaD / deltaT * 1000); } previousX = event.screenX; previousY = event.screenY; previousT = event.timeStamp; });Event.isTrustedEvent.isTrusted属性返回一个布尔值，表示该事件是否由真实的用户行为产生。比如，用户点击链接会产生一个click事件，该事件是用户产生的；Event构造函数生成的事件，则是脚本产生的。var evt = new Event('foo'); evt.isTrusted // false上面代码中，evt对象是脚本产生的，所以isTrusted属性返回false。Event.detailEvent.detail属性只有浏览器的 UI （用户界面）事件才具有。该属性返回一个数值，表示事件的某种信息。具体含义与事件类型相关。比如，对于click和dblclick事件，Event.detail是鼠标按下的次数（1表示单击，2表示双击，3表示三击）；对于鼠标滚轮事件，Event.detail是滚轮正向滚动的距离，负值就是负向滚动的距离，返回值总是3的倍数。// HTML 代码如下 // Hello function giveDetails(e) { console.log(e.detail); } document.querySelector('p').onclick = giveDetails;实例方法Event.preventDefault()Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。注意，该方法只是取消事件对当前元素的默认影响，不会阻止事件的传播。如果要阻止传播，可以使用stopPropagation()或stopImmediatePropagation()方法。// HTML 代码为 // var cb = document.getElementById('my-checkbox'); cb.addEventListener( 'click', function (e){ e.preventDefault(); }, false );上面代码中，浏览器的默认行为是单击会选中单选框，取消这个行为，就导致无法选中单选框。利用这个方法，可以为文本输入框设置校验条件。如果用户的输入不符合条件，就无法将字符输入文本框。// HTML 代码为 // var input = document.getElementById('my-input'); input.addEventListener('keypress', checkName, false); function checkName(e) { if (e.charCode < 97 || e.charCode > 122) { e.preventDefault(); } }上面代码为文本框的keypress事件设定监听函数后，将只能输入小写字母，否则输入事件的默认行为（写入文本框）将被取消，导致不能向文本框输入内容。Event.stopPropagation()stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。function stopEvent(e) { e.stopPropagation(); } el.addEventListener('click', stopEvent, false);上面代码中，click事件将不会进一步冒泡到el节点的父节点。Event.stopImmediatePropagation()Event.stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用，不管监听函数定义在当前节点还是其他节点。也就是说，该方法阻止事件的传播，比Event.stopPropagation()更彻底。如果同一个节点对于同一个事件指定了多个监听函数，这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了Event.stopImmediatePropagation方法，其他的监听函数就不会再执行了。function l1(e){ e.stopImmediatePropagation(); } function l2(e){ console.log('hello world'); } el.addEventListener('click', l1, false); el.addEventListener('click', l2, false);上面代码在el节点上，为click事件添加了两个监听函数l1和l2。由于l1调用了event.stopImmediatePropagation方法，所以l2不会被调用。Event.composedPath()Event.composedPath()返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点。// HTML 代码如下 // // Hello // var div = document.querySelector('div'); var p = document.querySelector('p'); div.addEventListener('click', function (e) { console.log(e.composedPath()); }, false); // [p, div, body, html, document, Window]上面代码中，click事件的最底层节点是p，向上依次是div、body、html、document、Window。
事件模型监听函数浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。JavaScript 有三种方法，可以为事件绑定监听函数。HTML 的 on- 属性HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。 上面代码为body节点的load事件、div节点的click事件，指定了监听代码。一旦事件发生，就会执行这段代码。元素的事件监听属性，都是on加上事件名，比如onload就是on + load，表示load事件的监听代码。注意，这些属性的值是将会执行的代码，而不是一个函数。 一旦指定的事件发生，on-属性的值是原样传入 JavaScript 引擎执行。因此如果要执行函数，不要忘记加上一对圆括号。使用这个方法指定的监听代码，只会在冒泡阶段触发。 点击 上面代码中， 是 的子元素。 的click事件，也会触发 的click事件。由于on-属性的监听代码，只在冒泡阶段触发，所以点击结果是先输出1，再输出2，即事件从子元素开始冒泡到父元素。直接设置on-属性，与通过元素节点的setAttribute方法设置on-属性，效果是一样的。el.setAttribute('onclick', 'doSomething()'); // 等同于 // <Element onclick="doSomething()">元素节点的事件属性元素节点对象的事件属性，同样可以指定监听函数。window.onload = doSomething; div.onclick = function (event) { console.log('触发事件'); };使用这个方法指定的监听函数，也是只会在冒泡阶段触发。注意，这种方法与 HTML 的on-属性的差异是，它的值是函数名（doSomething），而不像后者，必须给出完整的监听代码（doSomething()）。EventTarget.addEventListener()所有 DOM 节点实例都有addEventListener方法，用来为该节点定义事件的监听函数。window.addEventListener('load', doSomething, false);addEventListener方法的详细介绍，参见EventTarget章节。小结上面三种方法，第一种“HTML 的 on- 属性”，违反了 HTML 与 JavaScript 代码相分离的原则，将两者写在一起，不利于代码分工，因此不推荐使用。第二种“元素节点的事件属性”的缺点在于，同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。因此，也不推荐使用。第三种EventTarget.addEventListener是推荐的指定监听函数的方法。它有如下优点：同一个事件可以添加多个监听函数。能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。this 的指向监听函数内部的this指向触发事件的那个元素节点。 点击 执行上面代码，点击后会输出btn。其他两种监听函数的写法，this的指向也是如此。// HTML 代码如下 // 点击 var btn = document.getElementById('btn'); // 写法一 btn.onclick = function () { console.log(this.id); }; // 写法二 btn.addEventListener( 'click', function (e) { console.log(this.id); }, false );上面两种写法，点击按钮以后也是输出btn。事件的传播一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。这种三阶段的传播模型，使得同一个事件会在多个节点上触发。 点击 上面代码中， 节点之中有一个 节点。如果对这两个节点，都设置click事件的监听函数（每个节点的捕获阶段和冒泡阶段，各设置一个监听函数），共计设置四个监听函数。然后，对 点击，click事件会触发四次。var phases = { 1: 'capture', 2: 'target', 3: 'bubble' }; var div = document.querySelector('div'); var p = document.querySelector('p'); div.addEventListener('click', callback, true); p.addEventListener('click', callback, true); div.addEventListener('click', callback, false); p.addEventListener('click', callback, false); function callback(event) { var tag = event.currentTarget.tagName; var phase = phases[event.eventPhase]; console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'"); } // 点击以后的结果 // Tag: 'DIV'. EventPhase: 'capture' // Tag: 'P'. EventPhase: 'target' // Tag: 'P'. EventPhase: 'target' // Tag: 'DIV'. EventPhase: 'bubble'上面代码表示，click事件被触发了四次： 节点的捕获阶段和冒泡阶段各1次， 节点的目标阶段触发了2次。捕获阶段：事件从 向 传播时，触发 的click事件；目标阶段：事件从 到达 时，触发 的click事件；冒泡阶段：事件从 传回 时，再次触发 的click事件。其中， 节点有两个监听函数（addEventListener方法第三个参数的不同，会导致绑定两个监听函数），因此它们都会因为click事件触发一次。所以， 会在target阶段有两次输出。注意，浏览器总是假定click事件的目标节点，就是点击位置嵌套最深的那个节点（本例是 节点里面的 节点）。所以， 节点的捕获阶段和冒泡阶段，都会显示为target阶段。事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.body）。也就是说，上例的事件传播顺序，在捕获阶段依次为window、document、html、body、div、p，在冒泡阶段依次为p、div、body、html、document、window。事件的代理由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。var ul = document.querySelector('ul'); ul.addEventListener('click', function (event) { if (event.target.tagName.toLowerCase() === 'li') { // some code } });上面代码中，click事件的监听函数定义在 节点，但是实际上，它处理的是子节点 的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个 节点上定义监听函数。而且以后再添加子节点，监听函数依然有效。如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。// 事件传播到 p 元素后，就不再向下传播了 p.addEventListener('click', function (event) { event.stopPropagation(); }, true); // 事件冒泡到 p 元素后，就不再向上冒泡了 p.addEventListener('click', function (event) { event.stopPropagation(); }, false);上面代码中，stopPropagation方法分别在捕获阶段和冒泡阶段，阻止了事件的传播。但是，stopPropagation方法只会阻止事件的传播，不会阻止该事件触发 节点的其他click事件的监听函数。也就是说，不是彻底取消click事件。p.addEventListener('click', function (event) { event.stopPropagation(); console.log(1); }); p.addEventListener('click', function(event) { // 会触发 console.log(2); });上面代码中，p元素绑定了两个click事件的监听函数。stopPropagation方法只能阻止这个事件的传播，不能取消这个事件，因此，第二个监听函数会触发。输出结果会先是1，然后是2。如果想要彻底取消该事件，不再触发后面所有click的监听函数，可以使用stopImmediatePropagation方法。p.addEventListener('click', function (event) { event.stopImmediatePropagation(); console.log(1); }); p.addEventListener('click', function(event) { // 不会被触发 console.log(2); });上面代码中，stopImmediatePropagation方法可以彻底取消这个事件，使得后面绑定的所有click监听函数都不再触发。所以，只会输出1，不会输出2。
EventTarget 接口事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。介绍具体的事件之前，先来看看如何让 DOM 节点监听事件。概述DOM 节点的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。该接口主要提供三个实例方法。addEventListener()：绑定事件的监听函数removeEventListener()：移除事件的监听函数dispatchEvent()：触发事件EventTarget.addEventListener()EventTarget.addEventListener()用于在当前节点或对象上（即部署了 EventTarget 接口的对象），定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。target.addEventListener(type, listener[, useCapture]);该方法接受三个参数。type：事件名称，大小写敏感。listener：监听函数。事件发生时，会调用该监听函数。useCapture：布尔值，如果设为true，表示监听函数将在捕获阶段（capture）触发（参见后文《事件的传播》部分）。该参数可选，默认值为false（监听函数只在冒泡阶段被触发）。下面是一个例子。function hello() { console.log('Hello world'); } var button = document.getElementById('btn'); button.addEventListener('click', hello, false);上面代码中，button节点的addEventListener()方法绑定click事件的监听函数hello()，该函数只在冒泡阶段触发。关于参数，有两个地方需要注意。首先，第二个参数除了监听函数，还可以是一个具有handleEvent方法的对象，效果与监听函数一样。buttonElement.addEventListener('click', { handleEvent: function (event) { console.log('click'); } });上面代码中，addEventListener()方法的第二个参数，就是一个具有handleEvent()方法的对象。其次，第三个参数除了布尔值useCapture，还可以是一个监听器配置对象，定制事件监听行为。该对象有以下属性。capture：布尔值，如果设为true，表示监听函数在捕获阶段触发，默认为false，在冒泡阶段触发。once：布尔值，如果设为true，表示监听函数执行一次就会自动移除，后面将不再监听该事件。该属性默认值为false。passive：布尔值，设为true时，表示禁止监听函数调用preventDefault()方法。如果调用了，浏览器将忽略这个要求，并在控制台输出一条警告。该属性默认值为false。signal：该属性的值为一个 AbortSignal 对象，为监听器设置了一个信号通道，用来在需要时发出信号，移除监听函数。下面是once属性的例子，让监听函数只执行一次。element.addEventListener('click', function (event) { // 只执行一次的代码 }, {once: true});addEventListener()方法可以为针对当前对象的同一个事件，添加多个不同的监听函数。这些函数按照添加顺序触发，即先添加先触发。如果为同一个事件多次添加同一个监听函数，该函数只会执行一次，多余的添加将自动被去除（不必使用removeEventListener()方法手动去除）。function hello() { console.log('Hello world'); } document.addEventListener('click', hello, false); document.addEventListener('click', hello, false);执行上面代码，点击文档只会输出一行Hello world。如果希望向监听函数传递参数，可以用匿名函数包装一下监听函数。function print(x) { console.log(x); } var el = document.getElementById('div1'); el.addEventListener('click', function () { print('Hello'); }, false);上面代码通过匿名函数，向监听函数print传递了一个参数。监听函数内部的this，指向当前事件所在的那个对象。// HTML 代码如下 // Hello var para = document.getElementById('para'); para.addEventListener('click', function (e) { console.log(this.nodeName); // "P" }, false);上面代码中，监听函数内部的this指向事件所在的对象para。EventTarget.removeEventListener()EventTarget.removeEventListener()方法用来移除addEventListener()方法添加的事件监听函数。该方法没有返回值。div.addEventListener('click', listener, false); div.removeEventListener('click', listener, false);removeEventListener()方法的参数，与addEventListener()方法完全一致。它的第一个参数“事件类型”，大小写敏感。注意，removeEventListener()方法移除的监听函数，必须是addEventListener()方法添加的那个监听函数，而且必须在同一个元素节点，否则无效。div.addEventListener('click', function (e) {}, false); div.removeEventListener('click', function (e) {}, false);上面代码中，removeEventListener()方法无效，因为监听函数不是同一个匿名函数。element.addEventListener('mousedown', handleMouseDown, true); element.removeEventListener("mousedown", handleMouseDown, false);上面代码中，removeEventListener()方法也是无效的，因为第三个参数不一样。EventTarget.dispatchEvent()EventTarget.dispatchEvent()方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。target.dispatchEvent(event)dispatchEvent()方法的参数是一个Event对象的实例（详见《Event 对象》章节）。para.addEventListener('click', hello, false); var event = new Event('click'); para.dispatchEvent(event);上面代码在当前节点触发了click事件。如果dispatchEvent()方法的参数为空，或者不是一个有效的事件对象，将报错。下面代码根据dispatchEvent()方法的返回值，判断事件是否被取消了。var canceled = !cb.dispatchEvent(event); if (canceled) { console.log('事件取消'); } else { console.log('事件未取消'); }
Mutation Observer API概述Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个 元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。Mutation Observer 有以下特点。它等待所有脚本任务完成后，才会运行（即异步触发方式）。它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。MutationObserver 构造函数使用时，首先使用MutationObserver构造函数，新建一个观察器实例，同时指定这个实例的回调函数。var observer = new MutationObserver(callback);上面代码中的回调函数，会在每次 DOM 变动后调用。该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例，下面是一个例子。var observer = new MutationObserver(function (mutations, observer) { mutations.forEach(function(mutation) { console.log(mutation); }); });MutationObserver 的实例方法observe()observe()方法用来启动监听，它接受两个参数。第一个参数：所要观察的 DOM 节点第二个参数：一个配置对象，指定所要观察的特定变动var article = document.querySelector('article'); var options = { 'childList': true, 'attributes':true } ; observer.observe(article, options);上面代码中，observe()方法接受两个参数，第一个是所要观察的DOM元素是article，第二个是所要观察的变动类型（子节点变动和属性变动）。观察器所能观察的 DOM 变动类型（即上面代码的options对象），有以下几种。childList：子节点的变动（指新增，删除或者更改）。attributes：属性的变动。characterData：节点内容或节点文本的变动。想要观察哪一种变动类型，就在option对象中指定它的值为true。需要注意的是，至少必须同时指定这三种观察的一种，若均未指定将报错。除了变动类型，options对象还可以设定以下属性：subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。// 开始监听文档根节点（即 标签）的变动 mutationObserver.observe(document.documentElement, { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true });对一个节点添加观察器，就像使用addEventListener()方法一样，多次添加同一个观察器是无效的，回调函数依然只会触发一次。如果指定不同的options对象，以后面添加的那个为准，类似覆盖。下面的例子是观察新增的子节点。var insertedNodes = []; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { for (var i = 0; i < mutation.addedNodes.length; i++) { insertedNodes.push(mutation.addedNodes[i]); } }); console.log(insertedNodes); }); observer.observe(document, { childList: true, subtree: true });disconnect()，takeRecords()disconnect()方法用来停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。observer.disconnect();takeRecords()方法用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。observer.takeRecords();下面是一个例子。// 保存所有没有被观察器处理的变动 var changes = mutationObserver.takeRecords(); // 停止观察 mutationObserver.disconnect();MutationRecord 对象DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。MutationRecord对象包含了DOM的相关信息，有如下属性：type：观察的变动类型（attributes、characterData或者childList）。target：发生变动的DOM节点。addedNodes：新增的DOM节点。removedNodes：删除的DOM节点。previousSibling：前一个同级节点，如果没有则返回null。nextSibling：下一个同级节点，如果没有则返回null。attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。应用示例子元素的变动下面的例子说明如何读取变动记录。var callback = function (records){ records.map(function(record){ console.log('Mutation type: ' + record.type); console.log('Mutation target: ' + record.target); }); }; var mo = new MutationObserver(callback); var option = { 'childList': true, 'subtree': true }; mo.observe(document.body, option);上面代码的观察器，观察 的所有下级节点（childList表示观察子节点，subtree表示观察后代节点）的变动。回调函数会在控制台显示所有变动的类型和目标节点。属性的变动下面的例子说明如何追踪属性的变动。var callback = function (records) { records.map(function (record) { console.log('Previous attribute value: ' + record.oldValue); }); }; var mo = new MutationObserver(callback); var element = document.getElementById('#my_element'); var options = { 'attributes': true, 'attributeOldValue': true } mo.observe(element, options);上面代码先设定追踪属性变动（'attributes': true），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。取代 DOMContentLoaded 事件网页加载的时候，DOM 节点的生成会产生变动记录，因此只要观察 DOM 的变动，就能在第一时间触发相关事件，也就没有必要使用DOMContentLoaded事件。var observer = new MutationObserver(callback); observer.observe(document.documentElement, { childList: true, subtree: true });上面代码中，监听document.documentElement（即网页的 HTML 节点）的子节点的变动，subtree属性指定监听还包括后代节点。因此，任意一个网页元素一旦生成，就能立刻被监听到。下面的代码，使用MutationObserver对象封装一个监听 DOM 生成的函数。(function(win){ 'use strict'; var listeners = []; var doc = win.document; var MutationObserver = win.MutationObserver || win.WebKitMutationObserver; var observer; function ready(selector, fn){ // 储存选择器和回调函数 listeners.push({ selector: selector, fn: fn }); if(!observer){ // 监听document变化 observer = new MutationObserver(check); observer.observe(doc.documentElement, { childList: true, subtree: true }); } // 检查该节点是否已经在DOM中 check(); } function check(){ // 检查是否匹配已储存的节点 for(var i = 0; i < listeners.length; i++){ var listener = listeners[i]; // 检查指定节点是否有匹配 var elements = doc.querySelectorAll(listener.selector); for(var j = 0; j < elements.length; j++){ var element = elements[j]; // 确保回调函数只会对该元素调用一次 if(!element.ready){ element.ready = true; // 对该节点调用回调函数 listener.fn.call(element, element); } } } } // 对外暴露ready win.ready = ready; })(this); // 使用方法 ready('.foo', function(element){ // ... });参考链接Paul Kinlan, Detect DOM changes with Mutation ObserversTiffany Brown, Getting to know mutation observersMichal Budzynski, JavaScript: The less known parts. DOM MutationsJeff Griffiths, DOM MutationObserver – reacting to DOM changes without killing browser performanceAddy Osmani, Detect, Undo And Redo DOM Changes With Mutation ObserversRyan Morr, Using Mutation Observers to Watch for Element Availability
CSS 操作CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本章介绍如何通过 JavaScript 操作 CSS。HTML 元素的 style 属性操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute()方法、setAttribute()方法和removeAttribute()方法，直接读写或删除网页元素的style属性。div.setAttribute( 'style', 'background-color:red;' + 'border:1px solid black;' );上面的代码相当于下面的 HTML 代码。 style不仅可以使用字符串读写，它本身还是一个对象，部署了 CSSStyleDeclaration 接口（详见下面的介绍），可以直接读写个别属性。e.style.fontSize = '18px'; e.style.color = 'black';CSSStyleDeclaration 接口简介CSSStyleDeclaration 接口用来操作元素的样式。三个地方部署了这个接口。元素节点的style属性（Element.style）CSSStyle实例的style属性window.getComputedStyle()的返回值CSSStyleDeclaration 接口可以直接读写 CSS 的样式属性，不过，连词号需要变成骆驼拼写法。var divStyle = document.querySelector('div').style; divStyle.backgroundColor = 'red'; divStyle.border = '1px solid black'; divStyle.width = '100px'; divStyle.height = '100px'; divStyle.fontSize = '10em'; divStyle.backgroundColor // red divStyle.border // 1px solid black divStyle.height // 100px divStyle.width // 100px上面代码中，style属性的值是一个 CSSStyleDeclaration 实例。这个对象所包含的属性与 CSS 规则一一对应，但是名字需要改写，比如background-color写成backgroundColor。改写的规则是将横杠从 CSS 属性名中去除，然后将横杠后的第一个字母大写。如果 CSS 属性名是 JavaScript 保留字，则规则名之前需要加上字符串css，比如float写成cssFloat。注意，该对象的属性值都是字符串，设置时必须包括单位，但是不含规则结尾的分号。比如，divStyle.width不能写为100，而要写为100px。另外，Element.style返回的只是行内样式，并不是该元素的全部样式。通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到。CSSStyleDeclaration 实例属性（1）CSSStyleDeclaration.cssTextCSSStyleDeclaration.cssText属性用来读写当前规则的所有样式声明文本。var divStyle = document.querySelector('div').style; divStyle.cssText = 'background-color: red;' + 'border: 1px solid black;' + 'height: 100px;' + 'width: 100px;';注意，cssText的属性值不用改写 CSS 属性名。删除一个元素的所有行内样式，最简便的方法就是设置cssText为空字符串。divStyle.cssText = '';（2）CSSStyleDeclaration.lengthCSSStyleDeclaration.length属性返回一个整数值，表示当前规则包含多少条样式声明。// HTML 代码如下 // var myDiv = document.getElementById('myDiv'); var divStyle = myDiv.style; divStyle.length // 3上面代码中，myDiv元素的行内样式共包含3条样式规则。（3）CSSStyleDeclaration.parentRuleCSSStyleDeclaration.parentRule属性返回当前规则所属的那个样式块（CSSRule 实例）。如果不存在所属的样式块，该属性返回null。该属性只读，且只在使用 CSSRule 接口时有意义。var declaration = document.styleSheets[0].rules[0].style; declaration.parentRule === document.styleSheets[0].rules[0] // trueCSSStyleDeclaration 实例方法（1）CSSStyleDeclaration.getPropertyPriority()CSSStyleDeclaration.getPropertyPriority方法接受 CSS 样式的属性名作为参数，返回一个字符串，表示有没有设置important优先级。如果有就返回important，否则返回空字符串。// HTML 代码为 // var style = document.getElementById('myDiv').style; style.margin // "10px" style.getPropertyPriority('margin') // "important" style.getPropertyPriority('color') // ""上面代码中，margin属性有important优先级，color属性没有。（2）CSSStyleDeclaration.getPropertyValue()CSSStyleDeclaration.getPropertyValue方法接受 CSS 样式属性名作为参数，返回一个字符串，表示该属性的属性值。// HTML 代码为 // var style = document.getElementById('myDiv').style; style.margin // "10px" style.getPropertyValue("margin") // "10px"（3）CSSStyleDeclaration.item()CSSStyleDeclaration.item方法接受一个整数值作为参数，返回该位置的 CSS 属性名。// HTML 代码为 // var style = document.getElementById('myDiv').style; style.item(0) // "color" style.item(1) // "background-color"上面代码中，0号位置的 CSS 属性名是color，1号位置的 CSS 属性名是background-color。如果没有提供参数，这个方法会报错。如果参数值超过实际的属性数目，这个方法返回一个空字符值。（4）CSSStyleDeclaration.removeProperty()CSSStyleDeclaration.removeProperty方法接受一个属性名作为参数，在 CSS 规则里面移除这个属性，返回这个属性原来的值。// HTML 代码为 // // 111 // var style = document.getElementById('myDiv').style; style.removeProperty('color') // 'red' // HTML 代码变为 // 上面代码中，删除color属性以后，字体颜色从红色变成默认颜色。（5）CSSStyleDeclaration.setProperty()CSSStyleDeclaration.setProperty方法用来设置新的 CSS 属性。该方法没有返回值。该方法可以接受三个参数。第一个参数：属性名，该参数是必需的。第二个参数：属性值，该参数可选。如果省略，则参数值默认为空字符串。第三个参数：优先级，该参数可选。如果设置，唯一的合法值是important，表示 CSS 规则里面的!important。// HTML 代码为 // // 111 // var style = document.getElementById('myDiv').style; style.setProperty('border', '1px solid blue');上面代码执行后，myDiv元素就会出现蓝色的边框。CSS 模块的侦测CSS 的规格发展太快，新的模块层出不穷。不同浏览器的不同版本，对 CSS 模块的支持情况都不一样。有时候，需要知道当前浏览器是否支持某个模块，这就叫做“CSS模块的侦测”。一个比较普遍适用的方法是，判断元素的style对象的某个属性值是否为字符串。typeof element.style.animationName === 'string'; typeof element.style.transform === 'string';如果该 CSS 属性确实存在，会返回一个字符串。即使该属性实际上并未设置，也会返回一个空字符串。如果该属性不存在，则会返回undefined。document.body.style['maxWidth'] // "" document.body.style['maximumWidth'] // undefined上面代码说明，这个浏览器支持max-width属性，但是不支持maximum-width属性。注意，不管 CSS 属性名的写法带不带连词线，style属性上都能反映出该属性是否存在。document.body.style['backgroundColor'] // "" document.body.style['background-color'] // ""另外，使用的时候，需要把不同浏览器的 CSS 前缀也考虑进去。var content = document.getElementById('content'); typeof content.style['webkitAnimation'] === 'string'这种侦测方法可以写成一个函数。function isPropertySupported(property) { if (property in document.body.style) return true; var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml']; var prefProperty = property.charAt(0).toUpperCase() + property.substr(1); for(var i = 0; i < prefixes.length; i++){ if((prefixes[i] + prefProperty) in document.body.style) return true; } return false; } isPropertySupported('background-clip') // trueCSS 对象浏览器原生提供 CSS 对象，为 JavaScript 操作 CSS 提供一些工具方法。这个对象目前有两个静态方法。CSS.escape()CSS.escape方法用于转义 CSS 选择器里面的特殊字符。 上面代码中，该元素的id属性包含一个#号，该字符在 CSS 选择器里面有特殊含义。不能直接写成document.querySelector('#foo#bar')，只能写成document.querySelector('#foo\\#bar')。这里必须使用双斜杠的原因是，单引号字符串本身会转义一次斜杠。CSS.escape方法就用来转义那些特殊字符。document.querySelector('#' + CSS.escape('foo#bar'))CSS.supports()CSS.supports方法返回一个布尔值，表示当前环境是否支持某一句 CSS 规则。它的参数有两种写法，一种是第一个参数是属性名，第二个参数是属性值；另一种是整个参数就是一行完整的 CSS 语句。// 第一种写法 CSS.supports('transform-origin', '5px') // true // 第二种写法 CSS.supports('display: table-cell') // true注意，第二种写法的参数结尾不能带有分号，否则结果不准确。CSS.supports('display: table-cell;') // falsewindow.getComputedStyle()行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素实际的样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。window.getComputedStyle方法，就用来返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数，返回一个 CSSStyleDeclaration 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。var div = document.querySelector('div'); var styleObj = window.getComputedStyle(div); styleObj.backgroundColor上面代码中，得到的背景色就是div元素真正的背景色。注意，CSSStyleDeclaration 实例是一个活的对象，任何对于样式的修改，会实时反映到这个实例上面。另外，这个实例是只读的。getComputedStyle方法还可以接受第二个参数，表示当前元素的伪元素（比如:before、:after、:first-line、:first-letter等）。var result = window.getComputedStyle(div, ':before');下面的例子是如何获取元素的高度。var elem = document.getElementById('elem-container'); var styleObj = window.getComputedStyle(elem, null) var height = styleObj.height; // 等同于 var height = styleObj['height']; var height = styleObj.getPropertyValue('height');上面代码得到的height属性，是浏览器最终渲染出来的高度，比其他方法得到的高度更可靠。由于styleObj是 CSSStyleDeclaration 实例，所以可以使用各种 CSSStyleDeclaration 的实例属性和方法。有几点需要注意。CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。比如，长度都是像素单位（返回值包括px后缀），颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。CSS 规则的简写形式无效。比如，想读取margin属性的值，不能直接读，只能读marginLeft、marginTop等属性；再比如，font属性也是不能直接读的，只能读font-size等单个属性。如果读取 CSS 原始的属性名，要用方括号运算符，比如styleObj['z-index']；如果读取骆驼拼写法的 CSS 属性名，可以直接读取styleObj.zIndex。该方法返回的 CSSStyleDeclaration 实例的cssText属性无效，返回undefined。CSS 伪元素CSS 伪元素是通过 CSS 向 DOM 添加的元素，主要是通过:before和:after选择器生成，然后用content属性指定伪元素的内容。下面是一段 HTML 代码。 Test content CSS 添加伪元素:before的写法如下。#test:before { content: 'Before '; color: #FF0; }节点元素的style对象无法读写伪元素的样式，这时就要用到window.getComputedStyle()。JavaScript 获取伪元素，可以使用下面的方法。var test = document.querySelector('#test'); var result = window.getComputedStyle(test, ':before').content; var color = window.getComputedStyle(test, ':before').color;此外，也可以使用 CSSStyleDeclaration 实例的getPropertyValue方法，获取伪元素的属性。var result = window.getComputedStyle(test, ':before') .getPropertyValue('content'); var color = window.getComputedStyle(test, ':before') .getPropertyValue('color');StyleSheet 接口概述StyleSheet接口代表网页的一张样式表，包括 元素加载的样式表和 var myStyleSheet = document.getElementById('myStyle').sheet; myStyleSheet instanceof StyleSheet // true严格地说，StyleSheet接口不仅包括网页样式表，还包括 XML 文档的样式表。所以，它有一个子类CSSStyleSheet表示网页的 CSS 样式表。我们在网页里面拿到的样式表实例，实际上是CSSStyleSheet的实例。这个子接口继承了StyleSheet的所有属性和方法，并且定义了几个自己的属性，下面把这两个接口放在一起介绍。实例属性StyleSheet实例有以下属性。（1）StyleSheet.disabledStyleSheet.disabled返回一个布尔值，表示该样式表是否处于禁用状态。手动设置disabled属性为true，等同于在 元素里面，将这张样式表设为alternate stylesheet，即该样式表将不会生效。注意，disabled属性只能在 JavaScript 脚本中设置，不能在 HTML 语句中设置。（2）Stylesheet.hrefStylesheet.href返回样式表的网址。对于内嵌样式表，该属性返回null。该属性只读。document.styleSheets[0].href（3）StyleSheet.mediaStyleSheet.media属性返回一个类似数组的对象（MediaList实例），成员是表示适用媒介的字符串。表示当前样式表是用于屏幕（screen），还是用于打印（print）或手持设备（handheld），或各种媒介都适用（all）。该属性只读，默认值是screen。document.styleSheets[0].media.mediaText // "all"MediaList实例的appendMedium方法，用于增加媒介；deleteMedium方法用于删除媒介。document.styleSheets[0].media.appendMedium('handheld'); document.styleSheets[0].media.deleteMedium('print');（4）StyleSheet.titleStyleSheet.title属性返回样式表的title属性。（5）StyleSheet.typeStyleSheet.type属性返回样式表的type属性，通常是text/css。document.styleSheets[0].type // "text/css"（6）StyleSheet.parentStyleSheetCSS 的@import命令允许在样式表中加载其他样式表。StyleSheet.parentStyleSheet属性返回包含了当前样式表的那张样式表。如果当前样式表是顶层样式表，则该属性返回null。if (stylesheet.parentStyleSheet) { sheet = stylesheet.parentStyleSheet; } else { sheet = stylesheet; }（7）StyleSheet.ownerNodeStyleSheet.ownerNode属性返回StyleSheet对象所在的 DOM 节点，通常是 或 var myStyleSheet = document.getElementById('myStyle').sheet; var crl = myStyleSheet.cssRules; crl instanceof CSSRuleList // trueCSSRuleList 实例里面，每一条规则（CSSRule 实例）可以通过rules.item(index)或者rules[index]拿到。CSS 规则的条数通过rules.length拿到。还是用上面的例子。crl[0] instanceof CSSRule // true crl.length // 2注意，添加规则和删除规则不能在 CSSRuleList 实例操作，而要在它的父元素 StyleSheet 实例上，通过StyleSheet.insertRule()和StyleSheet.deleteRule()操作。CSSRule 接口概述一条 CSS 规则包括两个部分：CSS 选择器和样式声明。下面就是一条典型的 CSS 规则。.myClass { color: red; background-color: yellow; }JavaScript 通过 CSSRule 接口操作 CSS 规则。一般通过 CSSRuleList 接口（StyleSheet.cssRules）获取 CSSRule 实例。// HTML 代码如下 // var myStyleSheet = document.getElementById('myStyle').sheet; var ruleList = myStyleSheet.cssRules; var rule = ruleList[0]; rule instanceof CSSRule // trueCSSRule 实例的属性（1）CSSRule.cssTextCSSRule.cssText属性返回当前规则的文本，还是使用上面的例子。rule.cssText // ".myClass { color: red; background-color: yellow; }"如果规则是加载（@import）其他样式表，cssText属性返回@import 'url'。（2）CSSRule.parentStyleSheetCSSRule.parentStyleSheet属性返回当前规则所在的样式表对象（StyleSheet 实例），还是使用上面的例子。rule.parentStyleSheet === myStyleSheet // true（3）CSSRule.parentRuleCSSRule.parentRule属性返回包含当前规则的父规则，如果不存在父规则（即当前规则是顶层规则），则返回null。父规则最常见的情况是，当前规则包含在@media规则代码块之中。// HTML 代码如下 // var myStyleSheet = document.getElementById('myStyle').sheet; var ruleList = myStyleSheet.cssRules; var rule0 = ruleList[0]; rule0.cssText // "@supports (display: flex) { // @media screen and (min-width: 900px) { // article { display: flex; } // } // }" // 由于这条规则内嵌其他规则， // 所以它有 cssRules 属性，且该属性是 CSSRuleList 实例 rule0.cssRules instanceof CSSRuleList // true var rule1 = rule0.cssRules[0]; rule1.cssText // "@media screen and (min-width: 900px) { // article { display: flex; } // }" var rule2 = rule1.cssRules[0]; rule2.cssText // "article { display: flex; }" rule1.parentRule === rule0 // true rule2.parentRule === rule1 // true（4）CSSRule.typeCSSRule.type属性返回一个整数值，表示当前规则的类型。最常见的类型有以下几种。1：普通样式规则（CSSStyleRule 实例）3：@import规则4：@media规则（CSSMediaRule 实例）5：@font-face规则CSSStyleRule 接口如果一条 CSS 规则是普通的样式规则（不含特殊的 CSS 命令），那么除了 CSSRule 接口，它还部署了 CSSStyleRule 接口。CSSStyleRule 接口有以下两个属性。（1）CSSStyleRule.selectorTextCSSStyleRule.selectorText属性返回当前规则的选择器。var stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].selectorText // ".myClass"注意，这个属性是可写的。（2）CSSStyleRule.styleCSSStyleRule.style属性返回一个对象（CSSStyleDeclaration 实例），代表当前规则的样式声明，也就是选择器后面的大括号里面的部分。// HTML 代码为 // var styleSheet = document.getElementById('myStyle').sheet; styleSheet.cssRules[0].style instanceof CSSStyleDeclaration // trueCSSStyleDeclaration 实例的cssText属性，可以返回所有样式声明，格式为字符串。styleSheet.cssRules[0].style.cssText // "color: red;" styleSheet.cssRules[0].selectorText // "p"CSSMediaRule 接口如果一条 CSS 规则是@media代码块，那么它除了 CSSRule 接口，还部署了 CSSMediaRule 接口。该接口主要提供media属性和conditionText属性。前者返回代表@media规则的一个对象（MediaList 实例），后者返回@media规则的生效条件。// HTML 代码如下 // var styleSheet = document.getElementById('myStyle').sheet; styleSheet.cssRules[0] instanceof CSSMediaRule // true styleSheet.cssRules[0].media // { // 0: "screen and (min-width: 900px)", // appendMedium: function, // deleteMedium: function, // item: function, // length: 1, // mediaText: "screen and (min-width: 900px)" // } styleSheet.cssRules[0].conditionText // "screen and (min-width: 900px)"window.matchMedia()基本用法window.matchMedia()方法用来将 CSS 的Media Query条件语句，转换成一个 MediaQueryList 实例。var mdl = window.matchMedia('(min-width: 400px)'); mdl instanceof MediaQueryList // true上面代码中，变量mdl就是 mediaQueryList 的实例。注意，如果参数不是有效的MediaQuery条件语句，window.matchMedia不会报错，依然返回一个 MediaQueryList 实例。window.matchMedia('bad string') instanceof MediaQueryList // trueMediaQueryList 接口的实例属性MediaQueryList 实例有三个属性。（1）MediaQueryList.mediaMediaQueryList.media属性返回一个字符串，表示对应的 MediaQuery 条件语句。var mql = window.matchMedia('(min-width: 400px)'); mql.media // "(min-width: 400px)"（2）MediaQueryList.matchesMediaQueryList.matches属性返回一个布尔值，表示当前页面是否符合指定的 MediaQuery 条件语句。if (window.matchMedia('(min-width: 400px)').matches) { /* 当前视口不小于 400 像素 */ } else { /* 当前视口小于 400 像素 */ }下面的例子根据mediaQuery是否匹配当前环境，加载相应的 CSS 样式表。var result = window.matchMedia("(max-width: 700px)"); if (result.matches){ var linkElm = document.createElement('link'); linkElm.setAttribute('rel', 'stylesheet'); linkElm.setAttribute('type', 'text/css'); linkElm.setAttribute('href', 'small.css'); document.head.appendChild(linkElm); }（3）MediaQueryList.onchange如果 MediaQuery 条件语句的适配环境发生变化，会触发change事件。MediaQueryList.onchange属性用来指定change事件的监听函数。该函数的参数是change事件对象（MediaQueryListEvent 实例），该对象与 MediaQueryList 实例类似，也有media和matches属性。var mql = window.matchMedia('(max-width: 600px)'); mql.onchange = function(e) { if (e.matches) { /* 视口不超过 600 像素 */ } else { /* 视口超过 600 像素 */ } }上面代码中，change事件发生后，存在两种可能。一种是显示宽度从600像素以上变为以下，另一种是从600像素以下变为以上，所以在监听函数内部要判断一下当前是哪一种情况。MediaQueryList 接口的实例方法MediaQueryList 实例有两个方法MediaQueryList.addListener()和MediaQueryList.removeListener()，用来为change事件添加或撤销监听函数。var mql = window.matchMedia('(max-width: 600px)'); // 指定监听函数 mql.addListener(mqCallback); // 撤销监听函数 mql.removeListener(mqCallback); function mqCallback(e) { if (e.matches) { /* 视口不超过 600 像素 */ } else { /* 视口超过 600 像素 */ } }注意，MediaQueryList.removeListener()方法不能撤销MediaQueryList.onchange属性指定的监听函数。
Text 节点和 DocumentFragment 节点Text 节点的概念文本节点（Text）代表元素节点（Element）和属性节点（Attribute）的文本内容。如果一个节点只包含一段文本，那么它就有一个文本子节点，代表该节点的文本内容。通常我们使用父节点的firstChild、nextSibling等属性获取文本节点，或者使用Document节点的createTextNode方法创造一个文本节点。// 获取文本节点 var textNode = document.querySelector('p').firstChild; // 创造文本节点 var textNode = document.createTextNode('Hi'); document.querySelector('div').appendChild(textNode);浏览器原生提供一个Text构造函数。它返回一个文本节点实例。它的参数就是该文本节点的文本内容。// 空字符串 var text1 = new Text(); // 非空字符串 var text2 = new Text('This is a text node');注意，由于空格也是一个字符，所以哪怕只有一个空格，也会形成文本节点。比如， 包含一个空格，它的子节点就是一个文本节点。文本节点除了继承Node接口，还继承了CharacterData接口。Node接口的属性和方法请参考《Node 接口》一章，这里不再重复介绍了，以下的属性和方法大部分来自CharacterData接口。Text 节点的属性datadata属性等同于nodeValue属性，用来设置或读取文本节点的内容。// 读取文本内容 document.querySelector('p').firstChild.data // 等同于 document.querySelector('p').firstChild.nodeValue // 设置文本内容 document.querySelector('p').firstChild.data = 'Hello World';wholeTextwholeText属性将当前文本节点与毗邻的文本节点，作为一个整体返回。大多数情况下，wholeText属性的返回值，与data属性和textContent属性相同。但是，某些特殊情况会有差异。举例来说，HTML 代码如下。 A B C 这时，文本节点的wholeText属性和data属性，返回值相同。var el = document.getElementById('para'); el.firstChild.wholeText // "A " el.firstChild.data // "A "但是，一旦移除节点，wholeText属性与data属性就会有差异，因为这时其实 节点下面包含了两个毗邻的文本节点。el.removeChild(para.childNodes[1]); el.firstChild.wholeText // "A C" el.firstChild.data // "A "lengthlength属性返回当前文本节点的文本长度。(new Text('Hello')).length // 5nextElementSibling，previousElementSiblingnextElementSibling属性返回紧跟在当前文本节点后面的那个同级元素节点。如果取不到元素节点，则返回null。// HTML 为 // Hello World var tn = document.querySelector('div').firstChild; tn.nextElementSibling // WorldpreviousElementSibling属性返回当前文本节点前面最近的同级元素节点。如果取不到元素节点，则返回null：。Text 节点的方法appendData()，deleteData()，insertData()，replaceData()，subStringData()以下5个方法都是编辑Text节点文本内容的方法。appendData()：在Text节点尾部追加字符串。deleteData()：删除Text节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度。insertData()：在Text节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串。replaceData()：用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串。subStringData()：用于获取子字符串，第一个参数为子字符串在Text节点中的开始位置，第二个参数为子字符串长度。// HTML 代码为 // Hello World var pElementText = document.querySelector('p').firstChild; pElementText.appendData('!'); // 页面显示 Hello World! pElementText.deleteData(7, 5); // 页面显示 Hello W pElementText.insertData(7, 'Hello '); // 页面显示 Hello WHello pElementText.replaceData(7, 5, 'World'); // 页面显示 Hello WWorld pElementText.substringData(7, 10); // 页面显示不变，返回"World "remove()remove方法用于移除当前Text节点。// HTML 代码为 // Hello World document.querySelector('p').firstChild.remove() // 现在 HTML 代码为 // splitText()splitText方法将Text节点一分为二，变成两个毗邻的Text节点。它的参数就是分割位置（从零开始），分割到该位置的字符前结束。如果分割位置不存在，将报错。分割后，该方法返回分割位置后方的字符串，而原Text节点变成只包含分割位置前方的字符串。// html 代码为 foobar var p = document.getElementById('p'); var textnode = p.firstChild; var newText = textnode.splitText(3); newText // "bar" textnode // "foo"父元素节点的normalize方法可以将毗邻的两个Text节点合并。接上面的例子，文本节点的splitText方法将一个Text节点分割成两个，父元素的normalize方法可以实现逆操作，将它们合并。p.childNodes.length // 2 // 将毗邻的两个 Text 节点合并 p.normalize(); p.childNodes.length // 1DocumentFragment 节点DocumentFragment节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点，parentNode返回null，但是可以插入任意数量的子节点。它不属于当前文档，操作DocumentFragment节点，要比直接操作 DOM 树快得多。它一般用于构建一个 DOM 结构，然后插入当前文档。document.createDocumentFragment方法，以及浏览器原生的DocumentFragment构造函数，可以创建一个空的DocumentFragment节点。然后再使用其他 DOM 方法，向其添加子节点。var docFrag = document.createDocumentFragment(); // 等同于 var docFrag = new DocumentFragment(); var li = document.createElement('li'); li.textContent = 'Hello World'; docFrag.appendChild(li); document.querySelector('ul').appendChild(docFrag);上面代码创建了一个DocumentFragment节点，然后将一个li节点添加在它里面，最后将DocumentFragment节点移动到原文档。注意，DocumentFragment节点本身不能被插入当前文档。当它作为appendChild()、insertBefore()、replaceChild()等方法的参数时，是它的所有子节点插入当前文档，而不是它自身。一旦DocumentFragment节点被添加进当前文档，它自身就变成了空节点（textContent属性为空字符串），可以被再次使用。如果想要保存DocumentFragment节点的内容，可以使用cloneNode方法。document .querySelector('ul') .appendChild(docFrag.cloneNode(true));上面这样添加DocumentFragment节点进入当前文档，不会清空DocumentFragment节点。下面是一个例子，使用DocumentFragment反转一个指定节点的所有子节点的顺序。function reverse(n) { var f = document.createDocumentFragment(); while(n.lastChild) f.appendChild(n.lastChild); n.appendChild(f); }DocumentFragment节点对象没有自己的属性和方法，全部继承自Node节点和ParentNode接口。也就是说，DocumentFragment节点比Node节点多出以下四个属性。children：返回一个动态的HTMLCollection集合对象，包括当前DocumentFragment对象的所有子元素节点。firstElementChild：返回当前DocumentFragment对象的第一个子元素节点，如果没有则返回null。lastElementChild：返回当前DocumentFragment对象的最后一个子元素节点，如果没有则返回null。childElementCount：返回当前DocumentFragment对象的所有子元素数量。
属性的操作HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）。 链接 上面代码中，a元素包括两个属性：id属性和href属性。属性本身是一个对象（Attr对象），但是实际上，这个对象极少使用。一般都是通过元素节点对象（HTMlElement对象）来操作属性。本章介绍如何操作这些属性。Element.attributes 属性元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。其他类型的节点对象，虽然也有attributes属性，但返回的都是null，因此可以把这个属性视为元素对象独有的。单个属性可以通过序号引用，也可以通过属性名引用。// HTML 代码如下 // document.body.attributes[0] document.body.attributes.bgcolor document.body.attributes['ONLOAD']注意，上面代码的三种方法，返回的都是属性节点对象，而不是属性值。属性节点对象有name和value属性，对应该属性的属性名和属性值，等同于nodeName属性和nodeValue属性。// HTML代码为 // var n = document.getElementById('mydiv'); n.attributes[0].name // "id" n.attributes[0].nodeName // "id" n.attributes[0].value // "mydiv" n.attributes[0].nodeValue // "mydiv"下面代码可以遍历一个元素节点的所有属性。var para = document.getElementsByTagName('p')[0]; var result = document.getElementById('result'); if (para.hasAttributes()) { var attrs = para.attributes; var output = ''; for(var i = attrs.length - 1; i >= 0; i--) { output += attrs[i].name + '->' + attrs[i].value; } result.textContent = output; } else { result.textContent = 'No attributes to show'; }元素的标准属性HTML 元素的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。var a = document.getElementById('test'); a.id // "test" a.href // "http://www.example.com/"上面代码中，a元素标签的属性id和href，自动成为节点对象的属性。这些属性都是可写的。var img = document.getElementById('myImage'); img.src = 'http://www.example.com/image.jpg';上面的写法，会立刻替换掉img对象的src属性，即会显示另外一张图片。这种修改属性的方法，常常用于添加表单的属性。var f = document.forms[0]; f.action = 'submit.php'; f.method = 'POST';上面代码为表单添加提交网址和提交方法。注意，这种用法虽然可以读写属性，但是无法删除属性，delete运算符在这里不会生效。HTML 元素的属性名是大小写不敏感的，但是 JavaScript 对象的属性名是大小写敏感的。转换规则是，转为 JavaScript 属性名时，一律采用小写。如果属性名包括多个单词，则采用骆驼拼写法，即从第二个单词开始，每个单词的首字母采用大写，比如onClick。有些 HTML 属性名是 JavaScript 的保留字，转为 JavaScript 属性时，必须改名。主要是以下两个。for属性改为htmlForclass属性改为className另外，HTML 属性值一般都是字符串，但是 JavaScript 属性会自动转换类型。比如，将字符串true转为布尔值，将onClick的值转为一个函数，将style属性的值转为一个CSSStyleDeclaration对象。因此，可以对这些属性赋予各种类型的值。属性操作的标准方法概述元素节点提供六个方法，用来操作属性。getAttribute()getAttributeNames()setAttribute()hasAttribute()hasAttributes()removeAttribute()这有几点注意。（1）适用性这六个方法对所有属性（包括用户自定义的属性）都适用。（2）返回值getAttribute()只返回字符串，不会返回其他类型的值。（3）属性名这些方法只接受属性的标准名称，不用改写保留字，比如for和class都可以直接使用。另外，这些方法对于属性名是大小写不敏感的。var image = document.images[0]; image.setAttribute('class', 'myImage');上面代码中，setAttribute方法直接使用class作为属性名，不用写成className。Element.getAttribute()Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。// HTML 代码为 // var div = document.getElementById('div1'); div.getAttribute('align') // "left"Element.getAttributeNames()Element.getAttributeNames()返回一个数组，成员是当前元素的所有属性的名字。如果当前元素没有任何属性，则返回一个空数组。使用Element.attributes属性，也可以拿到同样的结果，唯一的区别是它返回的是类似数组的对象。var mydiv = document.getElementById('mydiv'); mydiv.getAttributeNames().forEach(function (key) { var value = mydiv.getAttribute(key); console.log(key, value); })上面代码用于遍历某个节点的所有属性。Element.setAttribute()Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。该方法没有返回值。// HTML 代码为 // Hello World var b = document.querySelector('button'); b.setAttribute('name', 'myButton'); b.setAttribute('disabled', true);上面代码中，button元素的name属性被设成myButton，disabled属性被设成true。这里有两个地方需要注意，首先，属性值总是字符串，其他类型的值会自动转成字符串，比如布尔值true就会变成字符串true；其次，上例的disable属性是一个布尔属性，对于 元素来说，这个属性不需要属性值，只要设置了就总是会生效，因此setAttribute方法里面可以将disabled属性设成任意值。Element.hasAttribute()Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。var d = document.getElementById('div1'); if (d.hasAttribute('align')) { d.setAttribute('align', 'center'); }上面代码检查div节点是否含有align属性。如果有，则设置为居中对齐。Element.hasAttributes()Element.hasAttributes方法返回一个布尔值，表示当前元素是否有属性，如果没有任何属性，就返回false，否则返回true。var foo = document.getElementById('foo'); foo.hasAttributes() // trueElement.removeAttribute()Element.removeAttribute方法移除指定属性。该方法没有返回值。// HTML 代码为 // document.getElementById('div1').removeAttribute('align'); // 现在的HTML代码为 // dataset 属性有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一种解决方法是自定义属性。 上面代码为div元素自定义了foo属性，然后可以用getAttribute()和setAttribute()读写这个属性。var n = document.getElementById('mydiv'); n.getAttribute('foo') // bar n.setAttribute('foo', 'baz')这种方法虽然可以达到目的，但是会使得 HTML 元素的属性不符合标准，导致网页代码通不过校验。更好的解决方法是，使用标准提供的data-*属性。 然后，使用元素节点对象的dataset属性，它指向一个对象，可以用来操作 HTML 元素标签的data-*属性。var n = document.getElementById('mydiv'); n.dataset.foo // bar n.dataset.foo = 'baz'上面代码中，通过dataset.foo读写data-foo属性。删除一个data-*属性，可以直接使用delete命令。delete document.getElementById('myDiv').dataset.foo;除了dataset属性，也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。注意，data-后面的属性名有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。而且，属性名不应该使用A到Z的大写字母，比如不能有data-helloWorld这样的属性名，而要写成data-hello-world。转成dataset的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。反过来，dataset的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。比如，dataset.helloWorld会转成data-hello-world。
Element 节点简介Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。元素节点的nodeType属性都是1。var p = document.querySelector('p'); p.nodeName // "P" p.nodeType // 1Element对象继承了Node接口，因此Node的属性和方法在Element对象都存在。此外，不同的 HTML 元素对应的元素节点是不一样的，浏览器使用不同的构造函数，生成不同的元素节点，比如元素的构造函数是HTMLAnchorElement()， 是HTMLButtonElement()。因此，元素节点不是一种对象，而是许多种对象，这些对象除了继承Element对象的属性和方法，还有各自独有的属性和方法。实例属性元素特性的相关属性（1）Element.idElement.id属性返回指定元素的id属性，该属性可读写。// HTML 代码为 var p = document.querySelector('p'); p.id // "foo"注意，id属性的值是大小写敏感，即浏览器能正确识别 和 这两个元素的id属性，但是最好不要这样命名。（2）Element.tagNameElement.tagName属性返回指定元素的大写标签名，与nodeName属性的值相等。// HTML代码为 // Hello var span = document.getElementById('myspan'); span.id // "myspan" span.tagName // "SPAN"（3）Element.dirElement.dir属性用于读写当前元素的文字方向，可能是从左到右（"ltr"），也可能是从右到左（"rtl"）。（4）Element.accessKeyElement.accessKey属性用于读写分配给当前元素的快捷键。// HTML 代码如下 // 点击 var btn = document.getElementById('btn'); btn.accessKey // "h"上面代码中，btn元素的快捷键是h，按下Alt + h就能将焦点转移到它上面。（5）Element.draggableElement.draggable属性返回一个布尔值，表示当前元素是否可拖动。该属性可读写。（6）Element.langElement.lang属性返回当前元素的语言设置。该属性可读写。// HTML 代码如下 // document.documentElement.lang // "en"（7）Element.tabIndexElement.tabIndex属性返回一个整数，表示当前元素在 Tab 键遍历时的顺序。该属性可读写。tabIndex属性值如果是负值（通常是-1），则 Tab 键不会遍历到该元素。如果是正整数，则按照顺序，从小到大遍历。如果两个元素的tabIndex属性的正整数值相同，则按照出现的顺序遍历。遍历完所有tabIndex为正整数的元素以后，再遍历所有tabIndex等于0、或者属性值是非法值、或者没有tabIndex属性的元素，顺序为它们在网页中出现的顺序。（8）Element.titleElement.title属性用来读写当前元素的 HTML 属性title。该属性通常用来指定，鼠标悬浮时弹出的文字提示框。元素状态的相关属性（1）Element.hiddenElement.hidden属性返回一个布尔值，表示当前 HTML 元素的hidden属性的值。该属性可读写，用来控制当前元素是否可见。var btn = document.getElementById('btn'); var mydiv = document.getElementById('mydiv'); btn.addEventListener('click', function () { mydiv.hidden = !mydiv.hidden; }, false);注意，该属性与 CSS 设置是互相独立的。CSS 对当前元素可见性的设置，Element.hidden并不能反映出来。也就是说，这个属性并不能用来判断当前元素的实际可见性。CSS 设置的优先级高于Element.hidden。如果 CSS 指定了该元素不可见（display: none）或可见（visibility: visible），那么Element.hidden并不能改变该元素实际的可见性。换言之，这个属性只在 CSS 没有明确设定当前元素的可见性时才有效。（2）Element.contentEditable，Element.isContentEditableHTML 元素可以设置contentEditable属性，使得元素的内容可以编辑。 123 上面代码中， 元素有contenteditable属性，因此用户可以在网页上编辑这个区块的内容。Element.contentEditable属性返回一个字符串，表示是否设置了contenteditable属性，有三种可能的值。该属性可写。"true"：元素内容可编辑"false"：元素内容不可编辑"inherit"：元素是否可编辑，继承了父元素的设置Element.isContentEditable属性返回一个布尔值，同样表示是否设置了contenteditable属性。该属性只读。Element.attributesElement.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点，详见《属性的操作》一章。var p = document.querySelector('p'); var attrs = p.attributes; for (var i = attrs.length - 1; i >= 0; i--) { console.log(attrs[i].name + '->' + attrs[i].value); }上面代码遍历p元素的所有属性。Element.className，Element.classListclassName属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。classList属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。// HTML 代码 var div = document.getElementById('myDiv'); div.className // "one two three" div.classList // { // 0: "one" // 1: "two" // 2: "three" // length: 3 // }上面代码中，className属性返回一个空格分隔的字符串，而classList属性指向一个类似数组的对象，该对象的length属性（只读）返回当前元素的class数量。classList对象有下列方法。add()：增加一个 class。remove()：移除一个 class。contains()：检查当前元素是否包含某个 class。toggle()：将某个 class 移入或移出当前元素。item()：返回指定索引位置的 class。toString()：将 class 的列表转为字符串。var div = document.getElementById('myDiv'); div.classList.add('myCssClass'); div.classList.add('foo', 'bar'); div.classList.remove('myCssClass'); div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入，否则移除 div.classList.contains('myCssClass'); // 返回 true 或者 false div.classList.item(0); // 返回第一个 Class div.classList.toString();下面比较一下，className和classList在添加和删除某个 class 时的写法。var foo = document.getElementById('foo'); // 添加class foo.className += 'bold'; foo.classList.add('bold'); // 删除class foo.classList.remove('bold'); foo.className = foo.className.replace(/^bold$/, '');toggle方法可以接受一个布尔值，作为第二个参数。如果为true，则添加该属性；如果为false，则去除该属性。el.classList.toggle('abc', boolValue); // 等同于 if (boolValue) { el.classList.add('abc'); } else { el.classList.remove('abc'); }Element.dataset网页元素可以自定义data-属性，用来添加数据。 上面代码中， 元素有一个自定义的data-timestamp属性，用来为该元素添加一个时间戳。Element.dataset属性返回一个对象，可以从这个对象读写data-属性。// // ... // var article = document.getElementById('foo'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"注意，dataset上面的各个属性返回都是字符串。HTML 代码中，data-属性的属性名，只能包含英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）。它们转成 JavaScript 对应的dataset属性名，规则如下。开头的data-会省略。如果连词线后面跟了一个英文字母，那么连词线会取消，该字母变成大写。其他字符不变。因此，data-abc-def对应dataset.abcDef，data-abc-1对应dataset["abc-1"]。除了使用dataset读写data-属性，也可以使用Element.getAttribute()和Element.setAttribute()，通过完整的属性名读写这些属性。var mydiv = document.getElementById('mydiv'); mydiv.dataset.foo = 'bar'; mydiv.getAttribute('data-foo') // "bar"Element.innerHTMLElement.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括 和 元素。如果将innerHTML属性设为空，等于删除所有它包含的所有节点。el.innerHTML = '';上面代码等于将el节点变成了一个空节点，el原来包含的节点被全部删除。注意，读取属性值的时候，如果文本节点包含&、小于号（<）和大于号（>），innerHTML属性会将它们转为实体形式&、<、>。如果想得到原文，建议使用element.textContent属性。// HTML代码如下 5 > 3 document.getElementById('para').innerHTML // 5 > 3写入的时候，如果插入的文本包含 HTML 标签，会被解析成为节点对象插入 DOM。注意，如果文本之中含有 "; el.innerHTML = name;上面代码将脚本插入内容，脚本并不会执行。但是，innerHTML还是有安全风险的。var name = " "; el.innerHTML = name;上面代码中，alert方法是会执行的。因此为了安全考虑，如果插入的是文本，最好用textContent属性代替innerHTML。Element.outerHTMLElement.outerHTML属性返回一个字符串，表示当前元素节点的所有 HTML 代码，包括该元素本身和所有子元素。// HTML 代码如下 // Hello var d = document.getElementById('d'); d.outerHTML // ' Hello 'outerHTML属性是可读写的，对它进行赋值，等于替换掉当前元素。// HTML 代码如下 // Hello var container = document.getElementById('container'); var d = document.getElementById('d'); container.firstChild.nodeName // "DIV" d.nodeName // "DIV" d.outerHTML = ' Hello '; container.firstChild.nodeName // "P" d.nodeName // "DIV"上面代码中，变量d代表子节点，它的outerHTML属性重新赋值以后，内层的div元素就不存在了，被p元素替换了。但是，变量d依然指向原来的div元素，这表示被替换的DIV元素还存在于内存中。注意，如果一个节点没有父节点，设置outerHTML属性会报错。var div = document.createElement('div'); div.outerHTML = ' test '; // DOMException: This element has no parent node.上面代码中，div元素没有父节点，设置outerHTML属性会报错。Element.clientHeight，Element.clientWidthElement.clientHeight属性返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。Element.clientWidth属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight。// 视口高度 document.documentElement.clientHeight // 网页总高度 document.body.clientHeightElement.clientLeft，Element.clientTopElement.clientLeft属性等于元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。该属性总是返回整数值，如果是小数，会四舍五入。Element.clientTop属性等于网页元素顶部边框的宽度（单位像素），其他特点都与clientLeft相同。Element.scrollHeight，Element.scrollWidthElement.scrollHeight属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读。整张网页的总高度可以从document.documentElement或document.body上读取。// 返回网页的总高度 document.documentElement.scrollHeight document.body.scrollHeight注意，如果元素节点的内容出现溢出，即使溢出的内容是隐藏的，scrollHeight属性仍然返回元素的总高度。// HTML 代码如下 // ... document.getElementById('myDiv').scrollHeight // 356上面代码中，即使myDiv元素的 CSS 高度只有200像素，且溢出部分不可见，但是scrollHeight仍然会返回该元素的原始高度。Element.scrollLeft，Element.scrollTopElement.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。document.documentElement.scrollLeft document.documentElement.scrollTop这两个属性都可读写，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。Element.offsetParentElement.offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。 Hello 上面代码中，span元素的offsetParent属性就是div元素。该属性主要用于确定子元素位置偏移的计算基准，Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。 Hello 上面代码中，span元素的offsetParent属性是null。如果某个元素的所有上层节点的position属性都是static，则Element.offsetParent属性指向 元素。Element.offsetHeight，Element.offsetWidthElement.offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。Element.offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0。Element.offsetLeft，Element.offsetTopElement.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。下面的代码可以算出元素左上角相对于整张网页的坐标。function getElementPosition(e) { var x = 0; var y = 0; while (e !== null) { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return {x: x, y: y}; }Element.style每个元素节点都有style用来读写该元素的行内样式信息，具体介绍参见《CSS 操作》一章。Element.children，Element.childElementCountElement.children属性返回一个类似数组的对象（HTMLCollection实例），包括当前元素节点的所有子元素。如果当前元素没有子元素，则返回的对象包含零个成员。if (para.children.length) { var children = para.children; for (var i = 0; i < children.length; i++) { // ... } }上面代码遍历了para元素的所有子元素。这个属性与Node.childNodes属性的区别是，它只包括元素类型的子节点，不包括其他类型的子节点。Element.childElementCount属性返回当前元素节点包含的子元素节点的个数，与Element.children.length的值相同。Element.firstElementChild，Element.lastElementChildElement.firstElementChild属性返回当前元素的第一个元素子节点，Element.lastElementChild返回最后一个元素子节点。如果没有元素子节点，这两个属性返回null。Element.nextElementSibling，Element.previousElementSiblingElement.nextElementSibling属性返回当前元素节点的后一个同级元素节点，如果没有则返回null。// HTML 代码如下 // Here is div-01 // Here is div-02 var el = document.getElementById('div-01'); el.nextElementSibling // Here is div-02 Element.previousElementSibling属性返回当前元素节点的前一个同级元素节点，如果没有则返回null。实例方法属性相关方法元素节点提供六个方法，用来操作属性。getAttribute()：读取某个属性的值getAttributeNames()：返回当前元素的所有属性名setAttribute()：写入属性值hasAttribute()：某个属性是否存在hasAttributes()：当前元素是否有属性removeAttribute()：删除属性这些方法的介绍请看《属性的操作》一章。Element.querySelector()Element.querySelector方法接受 CSS 选择器作为参数，返回父元素的第一个匹配的子元素。如果没有找到匹配的子元素，就返回null。var content = document.getElementById('content'); var el = content.querySelector('p');上面代码返回content节点的第一个p元素。Element.querySelector方法可以接受任何复杂的 CSS 选择器。document.body.querySelector("style[type='text/css'], style:not([type])");注意，这个方法无法选中伪元素。它可以接受多个选择器，它们之间使用逗号分隔。element.querySelector('div, p')上面代码返回element的第一个div或p子元素。需要注意的是，浏览器执行querySelector方法时，是先在全局范围内搜索给定的 CSS 选择器，然后过滤出哪些属于当前元素的子元素。因此，会有一些违反直觉的结果，下面是一段 HTML 代码。 Hello World 那么，像下面这样查询的话，实际上返回的是第一个p元素，而不是第二个。var outer = document.getElementById('outer'); outer.querySelector('div p') // Hello Element.querySelectorAll()Element.querySelectorAll方法接受 CSS 选择器作为参数，返回一个NodeList实例，包含所有匹配的子元素。var el = document.querySelector('#test'); var matches = el.querySelectorAll('div.highlighted > p');该方法的执行机制与querySelector方法相同，也是先在全局范围内查找，再过滤出当前元素的子元素。因此，选择器实际上针对整个文档的。它也可以接受多个 CSS 选择器，它们之间使用逗号分隔。如果选择器里面有伪元素的选择器，则总是返回一个空的NodeList实例。Element.getElementsByClassName()Element.getElementsByClassName方法返回一个HTMLCollection实例，成员是当前元素节点的所有具有指定 class 的子元素节点。该方法与document.getElementsByClassName方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。element.getElementsByClassName('red test');注意，该方法的参数大小写敏感。由于HTMLCollection实例是一个活的集合，document对象的任何变化会立刻反应到实例，下面的代码不会生效。// HTML 代码如下 // // // // var element = document.getElementById('example'); var matches = element.getElementsByClassName('foo'); for (var i = 0; i< matches.length; i++) { matches[i].classList.remove('foo'); matches.item(i).classList.add('bar'); } // 执行后，HTML 代码如下 // // // // 上面代码中，matches集合的第一个成员，一旦被拿掉 class 里面的foo，就会立刻从matches里面消失，导致出现上面的结果。Element.getElementsByTagName()Element.getElementsByTagName()方法返回一个HTMLCollection实例，成员是当前节点的所有匹配指定标签名的子元素节点。该方法与document.getElementsByClassName()方法的用法类似，只是搜索范围不是整个文档，而是当前元素节点。var table = document.getElementById('forecast-table'); var cells = table.getElementsByTagName('td');注意，该方法的参数是大小写不敏感的，因为 HTML 标签名也是大小写不敏感。Element.closest()Element.closest方法接受一个 CSS 选择器作为参数，返回匹配该选择器的、最接近当前节点的一个祖先节点（包括当前节点本身）。如果没有任何节点匹配 CSS 选择器，则返回null。// HTML 代码如下 // // Here is div-01 // Here is div-02 // Here is div-03 // // // var div03 = document.getElementById('div-03'); // div-03 最近的祖先节点 div03.closest("#div-02") // div-02 div03.closest("div div") // div-03 div03.closest("article > div") //div-01 div03.closest(":not(div)") // article上面代码中，由于closest方法将当前节点也考虑在内，所以第二个closest方法返回div-03。Element.matches()Element.matches方法返回一个布尔值，表示当前元素是否匹配给定的 CSS 选择器。if (el.matches('.someClass')) { console.log('Match!'); }事件相关方法以下三个方法与Element节点的事件相关。这些方法都继承自EventTarget接口，详见相关章节。Element.addEventListener()：添加事件的回调函数Element.removeEventListener()：移除事件监听函数Element.dispatchEvent()：触发事件element.addEventListener('click', listener, false); element.removeEventListener('click', listener, false); var event = new Event('click'); element.dispatchEvent(event);Element.scrollIntoView()Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域，类似于设置window.location.hash的效果。el.scrollIntoView(); // 等同于el.scrollIntoView(true) el.scrollIntoView(false);该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true。Element.getBoundingClientRect()Element.getBoundingClientRect方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息。var rect = obj.getBoundingClientRect();上面代码中，getBoundingClientRect方法返回的rect对象，具有以下属性（全部为只读）。x：元素左上角相对于视口的横坐标y：元素左上角相对于视口的纵坐标height：元素高度width：元素宽度left：元素左上角相对于视口的横坐标，与x属性相等right：元素右边界相对于视口的横坐标（等于x + width）top：元素顶部相对于视口的纵坐标，与y属性相等bottom：元素底部相对于视口的纵坐标（等于y + height）由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将left属性加上window.scrollX，top属性加上window.scrollY。注意，getBoundingClientRect方法的所有属性，都把边框（border属性）算作元素的一部分。也就是说，都是从边框外缘的各个点来计算。因此，width和height包括了元素本身 + padding + border。另外，上面的这些属性，都是继承自原型的属性，Object.keys会返回一个空数组，这一点也需要注意。var rect = document.body.getBoundingClientRect(); Object.keys(rect) // []上面代码中，rect对象没有自身属性，而Object.keys方法只返回对象自身的属性，所以返回了一个空数组。Element.getClientRects()Element.getClientRects方法返回一个类似数组的对象，里面是当前元素在页面上形成的所有矩形（所以方法名中的Rect用的是复数）。每个矩形都有bottom、height、left、right、top和width六个属性，表示它们相对于视口的四个坐标，以及本身的高度和宽度。对于盒状元素（比如 和 ），该方法返回的对象中只有该元素一个成员。对于行内元素（比如、、），该方法返回的对象有多少个成员，取决于该元素在页面上占据多少行。这是它和Element.getBoundingClientRect()方法的主要区别，后者对于行内元素总是返回一个矩形。Hello World Hello World Hello World上面代码是一个行内元素，如果它在页面上占据三行，getClientRects方法返回的对象就有三个成员，如果它在页面上占据一行，getClientRects方法返回的对象就只有一个成员。var el = document.getElementById('inline'); el.getClientRects().length // 3 el.getClientRects()[0].left // 8 el.getClientRects()[0].right // 113.908203125 el.getClientRects()[0].bottom // 31.200000762939453 el.getClientRects()[0].height // 23.200000762939453 el.getClientRects()[0].width // 105.908203125这个方法主要用于判断行内元素是否换行，以及行内元素的每一行的位置偏移。注意，如果行内元素包括换行符，那么该方法会把换行符考虑在内。 Hello World Hello World Hello World 上面代码中，节点内部有三个换行符，即使 HTML 语言忽略换行符，将它们显示为一行，getClientRects()方法依然会返回三个成员。如果行宽设置得特别窄，上面的元素显示为6行，那么就会返回六个成员。Element.insertAdjacentElement()Element.insertAdjacentElement方法在相对于当前元素的指定位置，插入一个新的节点。该方法返回被插入的节点，如果插入失败，返回null。element.insertAdjacentElement(position, element);Element.insertAdjacentElement方法一共可以接受两个参数，第一个参数是一个字符串，表示插入的位置，第二个参数是将要插入的节点。第一个参数只可以取如下的值。beforebegin：当前元素之前afterbegin：当前元素内部的第一个子节点前面beforeend：当前元素内部的最后一个子节点后面afterend：当前元素之后注意，beforebegin和afterend这两个值，只在当前节点有父节点时才会生效。如果当前节点是由脚本创建的，没有父节点，那么插入会失败。var p1 = document.createElement('p') var p2 = document.createElement('p') p1.insertAdjacentElement('afterend', p2) // null上面代码中，p1没有父节点，所以插入p2到它后面就失败了。如果插入的节点是一个文档里现有的节点，它会从原有位置删除，放置到新的位置。Element.insertAdjacentHTML()，Element.insertAdjacentText()Element.insertAdjacentHTML方法用于将一个 HTML 字符串，解析生成 DOM 结构，插入相对于当前节点的指定位置。element.insertAdjacentHTML(position, text);该方法接受两个参数，第一个是一个表示指定位置的字符串，第二个是待解析的 HTML 字符串。第一个参数只能设置下面四个值之一。beforebegin：当前元素之前afterbegin：当前元素内部的第一个子节点前面beforeend：当前元素内部的最后一个子节点后面afterend：当前元素之后// HTML 代码： one var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', ' two '); // 执行后的 HTML 代码： // one two 该方法只是在现有的 DOM 结构里面插入节点，这使得它的执行速度比innerHTML方法快得多。注意，该方法不会转义 HTML 字符串，这导致它不能用来插入用户输入的内容，否则会有安全风险。Element.insertAdjacentText方法在相对于当前节点的指定位置，插入一个文本节点，用法与Element.insertAdjacentHTML方法完全一致。// HTML 代码： one var d1 = document.getElementById('one'); d1.insertAdjacentText('afterend', 'two'); // 执行后的 HTML 代码： // one twoElement.remove()Element.remove方法继承自 ChildNode 接口，用于将当前元素节点从它的父节点移除。var el = document.getElementById('mydiv'); el.remove();上面代码将el节点从 DOM 树里面移除。Element.focus()，Element.blur()Element.focus方法用于将当前页面的焦点，转移到指定元素上。document.getElementById('my-span').focus();该方法可以接受一个对象作为参数。参数对象的preventScroll属性是一个布尔值，指定是否将当前元素停留在原始位置，而不是滚动到可见区域。function getFocus() { document.getElementById('btn').focus({preventScroll:false}); }上面代码会让btn元素获得焦点，并滚动到可见区域。最后，从document.activeElement属性可以得到当前获得焦点的元素。Element.blur方法用于将焦点从当前元素移除。Element.click()Element.click方法用于在当前元素上模拟一次鼠标点击，相当于触发了click事件。参考链接Craig Buckler，How to Translate from DOM to SVG Coordinates and Back Again
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.defaultViewdocument.defaultView属性返回document对象所属的window对象。如果当前文档不属于window对象，该属性返回null。document.defaultView === window // true（2）document.doctype对于 HTML 文档来说，document对象一般有两个子节点。第一个子节点是document.doctype，指向<DOCTYPE>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成 。如果网页没有声明 DTD，该属性返回null。var doctype = document.doctype; doctype // " " doctype.name // "html"document.firstChild通常就返回这个节点。（3）document.documentElementdocument.documentElement属性返回当前文档的根元素节点（root）。它通常是document节点的第二个子节点，紧跟在document.doctype节点后面。HTML网页的该属性，一般是 节点。（4）document.body，document.headdocument.body属性指向 节点，document.head属性指向 节点。这两个属性总是存在的，如果网页源码里面省略了 或 ，浏览器会自动创建。另外，这两个属性是可写的，如果改写它们的值，相当于移除所有子节点。（5）document.scrollingElementdocument.scrollingElement属性返回文档的滚动元素。也就是说，当文档整体滚动时，到底是哪个元素在滚动。标准模式下，这个属性返回的文档的根元素document.documentElement（即 ）。兼容（quirk）模式下，返回的是 元素，如果该元素不存在，返回null。// 页面滚动到浏览器顶部 document.scrollingElement.scrollTop = 0;（6）document.activeElementdocument.activeElement属性返回获得当前焦点（focus）的 DOM 元素。通常，这个属性返回的是 、 、 等表单元素，如果当前没有焦点元素，返回 元素或null。（7）document.fullscreenElementdocument.fullscreenElement属性返回当前以全屏状态展示的 DOM 元素。如果不是全屏状态，该属性返回null。if (document.fullscreenElement.nodeName == 'VIDEO') { console.log('全屏播放视频'); }上面代码中，通过document.fullscreenElement可以知道 元素有没有处在全屏状态，从而判断用户行为。节点集合属性以下属性返回一个HTMLCollection实例，表示文档内部特定元素的集合。这些集合都是动态的，原节点有任何变化，立刻会反映在集合中。（1）document.linksdocument.links属性返回当前文档所有设定了href属性的及 节点。// 打印文档所有的链接 var links = document.links; for(var i = 0; i < links.length; i++) { console.log(links[i]); }（2）document.formsdocument.forms属性返回所有 表单节点。var selectForm = document.forms[0];上面代码获取文档第一个表单。除了使用位置序号，id属性和name属性也可以用来引用表单。/* HTML 代码如下 */ document.forms[0] === document.forms.foo // true document.forms.bar === document.forms.foo // true（3）document.imagesdocument.images属性返回页面所有 图片节点。var imglist = document.images; for(var i = 0; i < imglist.length; i++) { if (imglist[i].src === 'banner.gif') { // ... } }上面代码在所有img标签中，寻找某张图片。（4）document.embeds，document.pluginsdocument.embeds属性和document.plugins属性，都返回所有 节点。（5）document.scriptsdocument.scripts属性返回所有 上面代码中，document.currentScript就是 在浏览器打开上面网页，将会显示hello world。document.write是 JavaScript 语言标准化之前就存在的方法，现在完全有更符合标准的方法向文档写入内容（比如对innerHTML属性赋值）。所以，除了某些特殊情况，应该尽量避免使用document.write这个方法。document.writeln方法与write方法完全一致，除了会在输出内容的尾部添加换行符。document.write(1); document.write(2); // 12 document.writeln(1); document.writeln(2); // 1 // 2 //注意，writeln方法添加的是 ASCII 码的换行符，渲染成 HTML 网页时不起作用，即在网页上显示不出换行。网页上的换行，必须显式写入 。document.querySelector()，document.querySelectorAll()document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。var el1 = document.querySelector('.myclass'); var el2 = document.querySelector('#myParent > [ng-click]');document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。elementList = document.querySelectorAll('.myclass');这两个方法的参数，可以是逗号分隔的多个 CSS 选择器，返回匹配其中一个选择器的元素节点，这与 CSS 选择器的规则是一致的。var matches = document.querySelectorAll('div.note, div.alert');上面代码返回class属性是note或alert的div元素。这两个方法都支持复杂的 CSS 选择器。// 选中 data-foo-bar 属性等于 someval 的元素 document.querySelectorAll('[data-foo-bar="someval"]'); // 选中 myForm 表单中所有不通过验证的元素 document.querySelectorAll('#myForm :invalid'); // 选中div元素，那些 class 含 ignore 的除外 document.querySelectorAll('DIV:not(.ignore)'); // 同时选中 div，a，script 三类元素 document.querySelectorAll('DIV, A, SCRIPT');但是，它们不支持 CSS 伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。如果querySelectorAll方法的参数是字符串*，则会返回文档中的所有元素节点。另外，querySelectorAll的返回结果不是动态集合，不会实时反映元素节点的变化。最后，这两个方法除了定义在document对象上，还定义在元素节点上，即在元素节点上也可以调用。document.getElementsByTagName()document.getElementsByTagName()方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。var paras = document.getElementsByTagName('p'); paras instanceof HTMLCollection // true上面代码返回当前文档的所有p元素节点。HTML 标签名是大小写不敏感的，因此getElementsByTagName()方法的参数也是大小写不敏感的。另外，返回结果中，各个成员的顺序就是它们在文档中出现的顺序。如果传入*，就可以返回文档中所有 HTML 元素。var allElements = document.getElementsByTagName('*');注意，元素节点本身也定义了getElementsByTagName方法，返回该元素的后代元素中符合条件的元素。也就是说，这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。var firstPara = document.getElementsByTagName('p')[0]; var spans = firstPara.getElementsByTagName('span');上面代码选中第一个p元素内部的所有span元素。document.getElementsByClassName()document.getElementsByClassName()方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。var elements = document.getElementsByClassName(names);由于class是保留字，所以 JavaScript 一律使用className表示 CSS 的class。参数可以是多个class，它们之间使用空格分隔。var elements = document.getElementsByClassName('foo bar');上面代码返回同时具有foo和bar两个class的元素，foo和bar的顺序不重要。注意，正常模式下，CSS 的class是大小写敏感的。（quirks mode下，大小写不敏感。）与getElementsByTagName()方法一样，getElementsByClassName()方法不仅可以在document对象上调用，也可以在任何元素节点上调用。// 非document对象上调用 var elements = rootElement.getElementsByClassName(names);document.getElementsByName()document.getElementsByName()方法用于选择拥有name属性的 HTML 元素（比如 、<radio>、 、 、 和 等），返回一个类似数组的的对象（NodeList实例），因为name属性相同的元素可能不止一个。// 表单为 var forms = document.getElementsByName('x'); forms[0].tagName // "FORM"document.getElementById()document.getElementById()方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。var elem = document.getElementById('para1');注意，该方法的参数是大小写敏感的。比如，如果某个节点的id属性是main，那么document.getElementById('Main')将返回null。document.getElementById()方法与document.querySelector()方法都能获取元素节点，不同之处是document.querySelector()方法的参数使用 CSS 选择器语法，document.getElementById()方法的参数是元素的id属性。document.getElementById('myElement') document.querySelector('#myElement')上面代码中，两个方法都能选中id为myElement的元素，但是document.getElementById()比document.querySelector()效率高得多。另外，这个方法只能在document对象上使用，不能在其他元素节点上使用。document.elementFromPoint()，document.elementsFromPoint()document.elementFromPoint()方法返回位于页面指定位置最上层的元素节点。var element = document.elementFromPoint(50, 50);上面代码选中在(50, 50)这个坐标位置的最上层的那个 HTML 元素。elementFromPoint方法的两个参数，依次是相对于当前视口左上角的横坐标和纵坐标，单位是像素。如果位于该位置的 HTML 元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回null。document.elementsFromPoint()返回一个数组，成员是位于指定坐标（相对于视口）的所有元素。var elements = document.elementsFromPoint(x, y);document.createElement()document.createElement方法用来生成元素节点，并返回该节点。var newDiv = document.createElement('div');createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点。如果参数里面包含尖括号（即<和>）会报错。document.createElement(' '); // DOMException: The tag name provided (' ') is not a valid name注意，document.createElement的参数可以是自定义的标签名。document.createElement('foo');document.createTextNode()document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容。var newDiv = document.createElement('div'); var newContent = document.createTextNode('Hello'); newDiv.appendChild(newContent);上面代码新建一个div节点和一个文本节点，然后将文本节点插入div节点。这个方法可以确保返回的节点，被浏览器当作文本渲染，而不是当作 HTML 代码渲染。因此，可以用来展示用户的输入，避免 XSS 攻击。var div = document.createElement('div'); div.appendChild(document.createTextNode('Foo & bar')); console.log(div.innerHTML) // Foo & bar上面代码中，createTextNode方法对大于号和小于号进行转义，从而保证即使用户输入的内容包含恶意代码，也能正确显示。需要注意的是，该方法不对单引号和双引号转义，所以不能用来对 HTML 属性赋值。function escapeHtml(str) { var div = document.createElement('div'); div.appendChild(document.createTextNode(str)); return div.innerHTML; }; var userWebsite = '" onmouseover="alert(\'derp\')" "'; var profileLink = 'Bob'; var div = document.getElementById('target'); div.innerHTML = profileLink; // Bob上面代码中，由于createTextNode方法不转义双引号，导致onmouseover方法被注入了代码。document.createAttribute()document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它。var attribute = document.createAttribute(name);document.createAttribute方法的参数name，是属性的名称。var node = document.getElementById('div1'); var a = document.createAttribute('my_attrib'); a.value = 'newVal'; node.setAttributeNode(a); // 或者 node.setAttribute('my_attrib', 'newVal');上面代码为div1节点，插入一个值为newVal的my_attrib属性。document.createComment()document.createComment方法生成一个新的注释节点，并返回该节点。var CommentNode = document.createComment(data);document.createComment方法的参数是一个字符串，会成为注释节点的内容。document.createDocumentFragment()document.createDocumentFragment方法生成一个空的文档片段对象（DocumentFragment实例）。var docFragment = document.createDocumentFragment();DocumentFragment是一个存在于内存的 DOM 片段，不属于当前文档，常常用来生成一段较复杂的 DOM 结构，然后再插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的 DOM 有更好的性能表现。var docfrag = document.createDocumentFragment(); [1, 2, 3, 4].forEach(function (e) { var li = document.createElement('li'); li.textContent = e; docfrag.appendChild(li); }); var element = document.getElementById('ul'); element.appendChild(docfrag);上面代码中，文档片断docfrag包含四个 节点，这些子节点被一次性插入了当前文档。document.createEvent()document.createEvent方法生成一个事件对象（Event实例），该对象可以被element.dispatchEvent方法使用，触发指定事件。var event = document.createEvent(type);document.createEvent方法的参数是事件类型，比如UIEvents、MouseEvents、MutationEvents、HTMLEvents。var event = document.createEvent('Event'); event.initEvent('build', true, true); document.addEventListener('build', function (e) { console.log(e.type); // "build" }, false); document.dispatchEvent(event);上面代码新建了一个名为build的事件实例，然后触发该事件。document.addEventListener()，document.removeEventListener()，document.dispatchEvent()这三个方法用于处理document节点的事件。它们都继承自EventTarget接口，详细介绍参见《EventTarget 接口》一章。// 添加事件监听函数 document.addEventListener('click', listener, false); // 移除事件监听函数 document.removeEventListener('click', listener, false); // 触发事件 var event = new Event('click'); document.dispatchEvent(event);document.hasFocus()document.hasFocus方法返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。var focused = document.hasFocus();注意，有焦点的文档必定被激活（active），反之不成立，激活的文档未必有焦点。比如，用户点击按钮，从当前窗口跳出一个新窗口，该新窗口就是激活的，但是不拥有焦点。document.adoptNode()，document.importNode()document.adoptNode方法将某个节点及其子节点，从原来所在的文档或DocumentFragment里面移除，归属当前document对象，返回插入后的新节点。插入的节点对象的ownerDocument属性，会变成当前的document对象，而parentNode属性是null。var node = document.adoptNode(externalNode); document.appendChild(node);注意，document.adoptNode方法只是改变了节点的归属，并没有将这个节点插入新的文档树。所以，还要再用appendChild方法或insertBefore方法，将新节点插入当前文档树。document.importNode方法则是从原来所在的文档或DocumentFragment里面，拷贝某个节点及其子节点，让它们归属当前document对象。拷贝的节点对象的ownerDocument属性，会变成当前的document对象，而parentNode属性是null。var node = document.importNode(externalNode, deep);document.importNode方法的第一个参数是外部节点，第二个参数是一个布尔值，表示对外部节点是深拷贝还是浅拷贝，默认是浅拷贝（false）。虽然第二个参数是可选的，但是建议总是保留这个参数，并设为true。注意，document.importNode方法只是拷贝外部节点，这时该节点的父节点是null。下一步还必须将这个节点插入当前文档树。var iframe = document.getElementsByTagName('iframe')[0]; var oldNode = iframe.contentWindow.document.getElementById('myNode'); var newNode = document.importNode(oldNode, true); document.getElementById("container").appendChild(newNode);上面代码从iframe窗口，拷贝一个指定节点myNode，插入当前文档。document.createNodeIterator()document.createNodeIterator方法返回一个子节点遍历器。var nodeIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_ELEMENT );上面代码返回 元素子节点的遍历器。document.createNodeIterator方法第一个参数为所要遍历的根节点，第二个参数为所要遍历的节点类型，这里指定为元素节点（NodeFilter.SHOW_ELEMENT）。几种主要的节点类型写法如下。所有节点：NodeFilter.SHOW_ALL元素节点：NodeFilter.SHOW_ELEMENT文本节点：NodeFilter.SHOW_TEXT评论节点：NodeFilter.SHOW_COMMENTdocument.createNodeIterator方法返回一个“遍历器”对象（NodeFilter实例）。该实例的nextNode()方法和previousNode()方法，可以用来遍历所有子节点。var nodeIterator = document.createNodeIterator(document.body); var pars = []; var currentNode; while (currentNode = nodeIterator.nextNode()) { pars.push(currentNode); }上面代码中，使用遍历器的nextNode方法，将根节点的所有子节点，依次读入一个数组。nextNode方法先返回遍历器的内部指针所在的节点，然后会将指针移向下一个节点。所有成员遍历完成后，返回null。previousNode方法则是先将指针移向上一个节点，然后返回该节点。var nodeIterator = document.createNodeIterator( document.body, NodeFilter.SHOW_ELEMENT ); var currentNode = nodeIterator.nextNode(); var previousNode = nodeIterator.previousNode(); currentNode === previousNode // true上面代码中，currentNode和previousNode都指向同一个的节点。注意，遍历器返回的第一个节点，总是根节点。pars[0] === document.body // truedocument.createTreeWalker()document.createTreeWalker方法返回一个 DOM 的子树遍历器。它与document.createNodeIterator方法基本是类似的，区别在于它返回的是TreeWalker实例，后者返回的是NodeIterator实例。另外，它的第一个节点不是根节点。document.createTreeWalker方法的第一个参数是所要遍历的根节点，第二个参数指定所要遍历的节点类型（与document.createNodeIterator方法的第二个参数相同）。var treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); var nodeList = []; while(treeWalker.nextNode()) { nodeList.push(treeWalker.currentNode); }上面代码遍历 节点下属的所有元素节点，将它们插入nodeList数组。document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()（1）document.execCommand()如果document.designMode属性设为on，那么整个文档用户可编辑；如果元素的contenteditable属性设为true，那么该元素可编辑。这两种情况下，可以使用document.execCommand()方法，改变内容的样式，比如document.execCommand('bold')会使得字体加粗。document.execCommand(command, showDefaultUI, input)该方法接受三个参数。command：字符串，表示所要实施的样式。showDefaultUI：布尔值，表示是否要使用默认的用户界面，建议总是设为false。input：字符串，表示该样式的辅助内容，比如生成超级链接时，这个参数就是所要链接的网址。如果第二个参数设为true，那么浏览器会弹出提示框，要求用户在提示框输入该参数。但是，不是所有浏览器都支持这样做，为了兼容性，还是需要自己部署获取这个参数的方式。var url = window.prompt('请输入网址'); if (url) { document.execCommand('createlink', false, url); }上面代码中，先提示用户输入所要链接的网址，然后手动生成超级链接。注意，第二个参数是false，表示此时不需要自动弹出提示框。document.execCommand()的返回值是一个布尔值。如果为false，表示这个方法无法生效。这个方法大部分情况下，只对选中的内容生效。如果有多个内容可编辑区域，那么只对当前焦点所在的元素生效。document.execCommand()方法可以执行的样式改变有很多种，下面是其中的一些：bold、insertLineBreak、selectAll、createLink、insertOrderedList、subscript、delete、insertUnorderedList、superscript、formatBlock、insertParagraph、undo、forwardDelete、insertText、unlink、insertImage、italic、unselect、insertHTML、redo。这些值都可以用作第一个参数，它们的含义不难从字面上看出来。（2）document.queryCommandSupported()document.queryCommandSupported()方法返回一个布尔值，表示浏览器是否支持document.execCommand()的某个命令。if (document.queryCommandSupported('SelectAll')) { console.log('浏览器支持选中可编辑区域的所有内容'); }（3）document.queryCommandEnabled()document.queryCommandEnabled()方法返回一个布尔值，表示当前是否可用document.execCommand()的某个命令。比如，bold（加粗）命令只有存在文本选中时才可用，如果没有选中文本，就不可用。// HTML 代码为 // function doCopy(){ // 浏览器是否支持 copy 命令（选中内容复制到剪贴板） if (document.queryCommandSupported('copy')) { copyText('你好'); }else{ console.log('浏览器不支持'); } } function copyText(text) { var input = document.createElement('textarea'); document.body.appendChild(input); input.value = text; input.focus(); input.select(); // 当前是否有选中文字 if (document.queryCommandEnabled('copy')) { var success = document.execCommand('copy'); input.remove(); console.log('Copy Ok'); } else { console.log('queryCommandEnabled is false'); } }上面代码中，先判断浏览器是否支持copy命令（允许可编辑区域的选中内容，复制到剪贴板），如果支持，就新建一个临时文本框，里面写入内容“你好”，并将其选中。然后，判断是否选中成功，如果成功，就将“你好”复制到剪贴板，再删除那个临时文本框。document.getSelection()这个方法指向window.getSelection()，参见window对象一节的介绍。
ParentNode 接口，ChildNode 接口节点对象除了继承 Node 接口以外，还拥有其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。ParentNode 接口如果当前节点是父节点，就会混入了（mixin）ParentNode接口。由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会拥有ParentNode接口。ParentNode.childrenchildren属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。该属性只读。下面是遍历某个节点的所有元素子节点的示例。for (var i = 0; i < el.children.length; i++) { // ... }注意，children属性只包括元素子节点，不包括其他类型的子节点（比如文本子节点）。如果没有元素类型的子节点，返回值HTMLCollection实例的length属性为0。另外，HTMLCollection是动态集合，会实时反映 DOM 的任何变化。ParentNode.firstElementChildfirstElementChild属性返回当前节点的第一个元素子节点。如果没有任何元素子节点，则返回null。document.firstElementChild.nodeName // "HTML"上面代码中，document节点的第一个元素子节点是 。ParentNode.lastElementChildlastElementChild属性返回当前节点的最后一个元素子节点，如果不存在任何元素子节点，则返回null。document.lastElementChild.nodeName // "HTML"上面代码中，document节点的最后一个元素子节点是 （因为document只包含这一个元素子节点）。ParentNode.childElementCountchildElementCount属性返回一个整数，表示当前节点的所有元素子节点的数目。如果不包含任何元素子节点，则返回0。document.body.childElementCount // 13ParentNode.append()，ParentNode.prepend()（1）ParentNode.append()append()方法为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面。该方法不仅可以添加元素子节点（参数为元素节点），还可以添加文本子节点（参数为字符串）。var parent = document.body; // 添加元素子节点 var p = document.createElement('p'); parent.append(p); // 添加文本子节点 parent.append('Hello'); // 添加多个元素子节点 var p1 = document.createElement('p'); var p2 = document.createElement('p'); parent.append(p1, p2); // 添加元素子节点和文本子节点 var p = document.createElement('p'); parent.append('Hello', p);该方法没有返回值。注意，该方法与Node.prototype.appendChild()方法有三点不同。append()允许字符串作为参数，appendChild()只允许子节点作为参数。append()没有返回值，而appendChild()返回添加的子节点。append()可以添加多个子节点和字符串（即允许多个参数），appendChild()只能添加一个节点（即只允许一个参数）。（2）ParentNode.prepend()prepend()方法为当前节点追加一个或多个子节点，位置是第一个元素子节点的前面。它的用法与append()方法完全一致，也是没有返回值。ChildNode 接口如果一个节点有父节点，那么该节点就拥有了ChildNode接口。ChildNode.remove()remove()方法用于从父节点移除当前节点。el.remove()上面代码在 DOM 里面移除了el节点。ChildNode.before()，ChildNode.after()（1）ChildNode.before()before()方法用于在当前节点的前面，插入一个或多个同级节点。两者拥有相同的父节点。注意，该方法不仅可以插入元素节点，还可以插入文本节点。var p = document.createElement('p'); var p1 = document.createElement('p'); // 插入元素节点 el.before(p); // 插入文本节点 el.before('Hello'); // 插入多个元素节点 el.before(p, p1); // 插入元素节点和文本节点 el.before(p, 'Hello');（2）ChildNode.after()after()方法用于在当前节点的后面，插入一个或多个同级节点，两者拥有相同的父节点。用法与before方法完全相同。ChildNode.replaceWith()replaceWith()方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。var span = document.createElement('span'); el.replaceWith(span);上面代码中，el节点将被span节点替换。