京东的网站规划与建设,厦门市建设局网站住房保障专栏,重庆seo务,西安惠安小学网站建设DOM#xff08;文档对象模型#xff09;, 与语言无关, 用于操作XML#xff08;在Web中#xff09;和HTML#xff08;在浏览器在#xff09;文档的应用程序接口。访问DOM次数越多, 速度越慢, 费用也就越高。 最小化DOM访问次数#xff0c;尽可能在JavaScript端处理。 如果… 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 i0; len divs.length; ilen; 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(); } 转载于:https://www.cnblogs.com/floraCnblogs/p/DOM.html
