第十二章 DOM2和DOM3
1、DOM2和DOM3模块
DOM2级核心：在1级核心的基础上构建，为节点添加了更多的方法和属性
DOM2级视图：为文档定义了基于样式信息的不同视图
DOM2级事件：说明了如何使用事件和DOM文档交互
DOM2级样式：定义了如何以编程方式来访问和改变CSS样式信息
DOM2级遍历和范围：引入了遍历DOM文档和选择其特定部分的新接口
DOM2级HTML：在1级HTML基础上创建，添加了更多属性、方法和新接口
DOM3级XPath模块：
DOM3级加载与保存模块
2、DOM变化
3、样式
1）访问元素的样式：任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性，这个style对象是CSSStyleDeclaration的实例；对于使用短划线的CSS属性名必须将其转换成驼峰大小写形式才能通过JavaScript来访问，不能直接转换的是float属性，应转换为cssFloat（IE则是styleFloat；
2）计算的样式：DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法，接收两个参数——要取得计算样式的元素和一个伪元素字符串（如果不需要伪元素信息，则为null），返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式；IE不支持getComputedStyle()方法，它有currentStyle属性
3）操作样式表：应用于文档的所有样式表是通过document.styleSheets集合来表示，通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或item()方法可以访问每一个样式表
4、元素大小
1）偏移量
offsetHeight：元素在垂直方向上占用的空间大小
offsetWidth：元素在水平方向上占用的空间大小
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
2）客户区大小：元素内容及其内边距所占据的空间大小
clientWidth：元素内容区宽度加上左右内边距宽度
clientHeight：元素内容区高度加上上下内边距宽度
3）滚动大小：包含滚动内容的元素大小
scrollHeight：在没有滚动条的情况下，元素内容的总高度
scrollWidtht：在没有滚动条的情况下，元素内容的总宽度
scrollLeft：被隐藏在内容区域左侧的像素数
scrollTop：被隐藏在内容区域上侧的像素数
4）确定元素大小：getBoundingClientRect()方法确定元素在页面中相对于视口的位置，返回一个矩形对象包含四个属性——left、top、right和bottom
5、遍历：基于给定的起点对DOM结构执行深度优先
1）NodeIterator：
创建NodeIterator：document.createNodeIterator()，接收四个参数——root（搜索起点）、whatToShow（被访问节点的数字代码）、filter（一个NodeIterator对象或一个表示应该接受还是拒绝某种特定节点的函数）、entityReferenceExpansion（布尔值，表示是否要扩展实体引用）
操作NodeIterator：nextNode()和previousNode()方法都基于NodeIterator在DOM结构中的内部指针工作
2）TreeWalker
创建TreeWalker：document.TreeWalker(),接受四个参数——作为遍历起点的根节点、要显示的节点类型、过滤器和一个表示是否扩展实体引用的布尔值（同NodeIterator）
操作TreeWalker：nextNode()、previousNode()、parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling
6、范围
1）创建范围：document.createRange()
2）范围属性：startContainer（范围起点）、startOffset（范围在startContainer中起点的偏移量）、endContainer（范围终点）、endOffset（范围在endContainer中终点的偏移量）、commonAncestorContainer：startContainer和endContainer共同的祖先元素在节点树中位置最深的那个
3）操作范围：
selectNode()接收一个参数——一个DOM节点，选择整个节点，包括其子节点，startContainer、endContainer、commonAncestorContainer都等于传入节点的父节点；selectNodeContents()接收一个参数——一个DOM节点，只选择节点的子节点，startContainer、endContainer、commonAncestorContainer都等于传入节点；
setStart()和endStart都接收两个参数——一个参照节点和一个偏移量，对setStart()来说，参照节点为startContainer，偏移量为startOffset，对setEnd()来说，参照节点为endContainer，偏移量为endOffset。
deleteContents()用于从文档中删除范围所包含的内容；cloneContents()用于创建范围对象的一个副本，然后在文档的其他地方插入该副本；
insertNode()用于向范围选取的开始处插入一个节点；
collapse()用于折叠范围，接收一个参数——布尔值，值为true表示折叠到范围的起点，值为false表示折叠到范围的终点；
compareBoundaryPoints()确定这些范围是否有公共的边界（起点或终点），接收两个参数——表示比较方式的常量值和要比较的范围；cloneRange()用于创建调用它的范围的一个副本；detach()用于从创建范围的文档中分离出该范围
第十三章 事件
1、事件流：描述的是从页面中接收事件的顺序
1）事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
2）事件捕获：事件开始时由不太具体的节点接收，然后逐级向下传播到最具体的元素
3）DOM事件流：经历三个阶段——事件捕获阶段、处于目标阶段和事件冒泡阶段
2、事件处理程序：事件是用户或浏览器自身执行的某种动作，响应某个事件的函数就是事件处理程序
1）HTML事件处理程序
2）DOM0级事件处理程序：为元素的事件处理程序属性设置一个函数；事件处理程序会在其所属元素的作用域内运行
3）DOM2级事件处理程序：addEventListener()和removeEventListener()，都接收三个参数——要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值参数如果是true表示在捕获阶段调用事件处理程序，如果是false表示在冒泡阶段调用事件处理程序
4）IE事件处理程序（IE和Opera有效）：attachEvent()和detachEvent()，都接收两个参数——事件处理程序名称与事件处理程序函数；由于IE及更早的版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段；可以为一个元素添加多个事件处理程序，事件处理程序会在全局作用域中运行，因此this等于window
5）跨浏览器的事件处理程序：addHandler()用于使用DOM0级方法、DOM2级方法或IE方法来添加事件，removeHandler()用于默认使用DOM0级方法法来移除之前添加的事件，都接收三个参数——要操作的元素、事件名称和事件处理程序函数；为了保证处理事件的代码能在大多数浏览器下一致地运行，跨浏览器的事件处理程序只处理事件冒泡
3、事件对象：
1）DOM中的事件对象：
兼容DOM的浏览器会将一个event对象传入到事件处理程序中；
preventDefault()用于阻止特定事件的默认行为，前提是cancelable属性设置为true；stopPropagation()用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡；
currentTarget属性表明其事件处理程序当前正在处理事件的那个元素，始终等于this；target属性表明事件真正的目标；eventPhase属性表明事件当前正处于事件流的哪个阶段，值为1表明事件处于捕获阶段，值为2表明事件处于目标对象上，值为3表明事件处于冒泡阶段；
2）IE中的事件对象：
如果使用DOM0级方法添加事件处理程序时，可以通过window.event取得event对象；如果使用attachEvent()时，那么会有一个event对象作为参数被传入事件处理程序函数中；如果使用HTML特性添加事件处理程序时，可以通过一个event变量来访问event对象；srcElement属性表明事件真正的目标；returnValue属性用于阻止特定事件的默认行为，值为false表明阻止；cancelBubble属性用于立即停止事件在DOM层次中的传播，即取消进一步的事件冒泡，值为true表明停止；
3）跨浏览器的事件对象：getEvent()返回对event对象的引用；getTarget()返回事件的目标，通过检测event对象的target属性，如果存在则返回该属性的值，否则返回srcElement属性的值；preventDefault()用于取消事件的默认行为，如果不存在该方法，则设置returnValue的值为false；stopPropagation()用于阻止事件流，如果不存在该方法，则设置cancelBubble的值为true；
var EventUtil = {
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
4、事件类型
1）UI事件：指的是那些不一定与用户操作有关的事件
DOMactive：表明元素已经被用户操作（通过鼠标或键盘）激活；
load：当页面完全加载在window上触发;
unload：当页面完全卸载在window上触发；
abort：当用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上触发；
error：当发生JavaScript错误时在window上触发；
select：当用户选择文本框（<input>或<texterea>）中的一或多个字符时触发；
resize：当窗口或框架大小变化时在window上触发；
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发；
2）焦点事件：会在页面元素获得或失去焦点时触发
blur：在元素失去焦点时触发（通用）；
DOMFocusIn：在元素获得焦点时触发；
DOMFocusOut：在元素失去焦点时触发；
focus：在元素获得焦点时触发（通用）；
focusin：在元素获得焦点时触发；
focusout：在元素失去焦点时触发；
3）鼠标和滚轮事件
click：在用户点击主鼠标按钮或者按下回车键时触发；
dblclick：在用户双击主鼠标按钮时触发；
mousedown：在用户按下了任意鼠标按钮时触发；
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发；
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发；
mousemove：当鼠标指针在元素内部移动时重复触发；
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发；
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发；
mouseup：在用户释放鼠标按钮时触发；shiftKey、ctrlKey、altKey、metaKey