DOM编程

IE678只支持children属性。

四、类选择器

类选择器（返回的是NodeList也是类数组结构，与HTML集合不同的是，NodeList是静态列表）

document.querySelectorAll("#menu a") 等价于将 document.getElementById("menu").getElementsByTagName(‘a‘)的结果拷贝到数组中。

document.querySelectorAll("div.waring,div.notice") 同时返回含class为‘waring‘或者‘notice‘的元素

五、重排与重绘

浏览器下载完所有的组件后会生成两种内部数据结构：

DOM树，表示页面结构

渲染树，表示DOM节点如何显示

DOM树中的每一个非隐藏节点在渲染树中至少存在一个对应的节点，渲染树中的节点称为“帧”

当DOM树中的元素几何属性（宽和高）发生了变化，其他元素的几何属性也有可能受到影响，浏览器会使渲染树中受到影响的部分失效，重新构造渲染树，这个过程叫做“重排（reflow）”，有的书上也称为“回流”。完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为“重绘（repaint）”

并不是所有的DOM变化都会改变几何属性，比如改变背景色。

六、发生重排的情况：

添加或者删除可见元素

元素位置发生变化

元素尺寸发生变化（宽高边框）

内容改变

页面渲染器初始化

浏览器窗口尺寸变化

七、减少重排重绘的方法：

修改样式，一次性修改所有样式：el.style.cssText = ‘border-left:1px;border-right:1px‘

不要这样：el.style.borderLeft = ‘‘;el.style.borderRight=‘‘;

批量插入DOM。拼装好html后一次性插入innerHTML，不要循环插入。也可使用文档片段DocumentFragment一次性插入。

八、IE和:hover

如果有大量元素使用hover，会降低响应速度。IE8中比较明显。

九、事件委托

DOM标准定义的事件必须经历的三个阶段：

捕获

到达目标

冒泡

IE不支持捕获，实现事件委托，冒泡已经够了。

如果事件委托绑定的是单击事件，而且目标元素为A标签，需要阻止默认的跳转动作

标准浏览器：

e.preventDefault()

e.stopPropagation()

IE浏览器：

e.returnValue = false;

e.cancelBubble = true;