|
children |
childNodes |
|
childElementCount |
childNodes.length |
|
firstElenmentChild |
firstChild |
|
lastElementChild |
lastChild |
|
nextElementSibling |
nextSibling |
|
previousElementSibling |
previousSibling |
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;