首页 > 代码库 > DOM编程
DOM编程
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 = http://www.mamicode.com/false;
e.cancelBubble = true;