JavaScript的DOM编程总结

DOM（文档对象模型）, 与语言无关, 用于操作XML（在Web中）和HTML（在浏览器在）文档的应用程序接口。访问DOM次数越多, 速度越慢, 费用也就越高。

最小化DOM访问次数，尽可能在JavaScript端处理。

如果需要多次访问某个DOM节点，请使用局部变量存储它的作用。

小心处理html集合，因为它实时系着底层文档。把集合的长度缓存到一个变量中，并在迭代中使用它。如果需要经常操作集合，建议把他拷贝到一个数组中。

如果可能，请使用速度更快的API，比如querySelectorAll()和firstElementChild()。

重排: 当DOM的变化影响了元素的几何属性（高和宽），比如改变边框宽度或给段落增加文字，导致行数增加，浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为'重排'。

重绘: 完成重排后，浏览器会重新绘制受影响的部分到屏幕中，这个过程称为'重绘'。

要留意重绘和重排；批量修改样式时，'离线'操作DOM树，使用缓存，并减少访问布局信息的次数。

动画中使用绝对定位，使用拖放代理。

使用事件委托来减少事件处理器的数量。

innerHTML属性: ducument.getElementById('here').innerHTML()

保准的DOM方法: ducument.createElement()、 ducument。createTextNode()

节点克隆: ducument.cloneNode()

获取集合: ducument.getElementByName()

　　　　  ducument.getElementByClassName()

　　　　  ducument.getElementByTagName()

这个集合对象是一个类似数组的列表， 没有数组的push和slice方法， 但提供数组中的length属性，访问集合元素时使用局部变量

页面中的所有img元素: ducument.images

页面中所有a元素: ducument.links

页面中所有表单元素: ducument.forms

页面中第一个表单的所有字段: ducument.forms[0].elements

获取第一个元素: ducument.getElementById('div').firstChild

获取相邻元素: ducument.getElementById('div').firstChild.nextSibling

获取元素集合: ducument.getElementById('div').childNodes

API只返回元素节点: child 代替 childNodes

　　　　　　　　　 childElementCount 代替 childNodes.length

　　　　　　　　    firstElementChild 代替 firstChild

　　　　　　　　　 lastElementChild 代替 lastChild

　　　　　　　　　 nextElementChild 代替 nextSibling

　　　　　　　　　 previousElementSibling 代替 previousSibling

选择器API: ducument.querySelectorAll('#menu a') <=> ducument.getElementById('menu').getElementByTagName('a')

class为warning和notice的元素: ducument.querySelectorAll('div.warning, div.notice')

　　　　　　　　　　　   <=>  var errs=[];

　　　　　　　　　　　　　　   divs = doucument.getElementsByTagName('div');

　　　　　　　　　　　　　　   className = '' ;

　　　　　　　　　　　　　　   for(var i=0; len = divs.length; i<len; i++) {

　　　　　　　　　　　　　　　　  className = divs[i].className;

　　　　　　　　　　　　　　　　  if (className == 'notice' || className == 'warning') {

　　　　　　　　　　　　　　　　　　errs.push(divs[i]);

　　　　　　　　　　　　　　　　  }

　　　　　　　　　　　　　　  }

缓存布局信息: current++　　　

　　　　　　  mgElement.style.left = current + 'px';

　　　　　　  myElement.style.top = current + 'px';

　　　　　　  if (current >=500) {

　　　　　　　 　stopAnimation();　　　　　　　

　　　　　　  }