JavaScript DOM 操作

来源：互联网发布：手机淘宝申请维修流程编辑：程序博客网时间：2024/06/03 20:02

本文主要介绍JavaScript DOM 操作相关优化方法。

1.构建添加DOM节点减少文档回流（reflow）优化方法

var fragment = document.createDocumentFragment();for ( vari = 0; i < items.length; i++) {var item = document.createElement("li");item.appendChild(document.createTextNode("Option" + i));fragment.appendChild(item);}list.appendChild(fragment);

经过调整的代码，只会修改一次当前DOM的结构，就在最后一行，而在这之前，我们用文档碎片来保存那些中间结果。因为文档碎片没有任何可见内容，所以这类修改不会触发回流操作。实际上，文档碎片也不能被添加到DOM中，我们需要将它作为参数传给appendChild函数，而实际上添加的不是文档碎片本身，而是它下面的所有子元素。

2.修改DOM优化方法

list.style.display = "none";for ( vari = 0; i < items.length; i++) {varitem = document.createElement("li");item.appendChild(document.createTextNode("Option" + i));list.appendChild(item);}list.style.display = "";

将list的display样式设置为“none”后，就将这个元素从当前的DOM结构中删除了，因为这个节点不再可视。在将display属性设置回之前的默认值之前，向其下添加子元素是不会触发回流操作的。

3. 通过CSS类名切换来修改DOM样式

.selectedAnchor {    font-weight: bold;    text-decoration: none;    color: #000;  }  function selectAnchor(element) {    element.className = 'selectedAnchor';  }

参考：

1. 揭露JavaScript DOM操作基本原则

2. 减少浏览器重解析 JavaScript DOM操作优化方案