JavaScript DOM 操作

本文主要介绍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操作优化方案