两种方式实现加速Javascript DOM操作优化(1)(2)

方案二：在非渲染区修改DOM

（emu注：作者在这里再次脑子短路，把DocumentFragmentDOMGeneration模式的介绍提前到这里来了，emu只好再次发挥一下）
上一个方案解决的是修改一个超链接的问题，当一次需要对很多个超链接进行相同修改的时候，这个方案就可以大显身手了。

需求：

需求是这样的，我们要写一个函数来修改一个指定元素的子元素中所有的超链接的样式名（className）属性。要实现很简单，我们可以通过遍历每个超链接并且修改它们的样式名来完成任务。但是带来的问题就是，每修改一个超链接都会导致一次重解析。

functionupdateAllAnchors(element,anchorClass){  
varanchors=element.getElementsByTagName('a');  
for(vari=0,length=anchors.length;i<length;i++){  
anchors[i].className=anchorClass;  
}  
} 

解决方案：

要解决这个问题，我们可以把被修改的指定元素从DOM里面移除，再修改所有的超链接，然后在把这个元素插入回到它原来的位置上。为了完成这个复杂的操作，我们可以先写一个可重用的函数，它不但移除了这个DOM节点，还返回了一个把元素插回到原来的位置的函数。

/**  
*Removeanelementandprovideafunction  
thatinsertsitintoitsoriginalposition  
*@paramelement{Element}Theelementtobetemporarilyremoved  
*@return{Function}Afunctionthatinsertstheelementintoitsoriginalposition  
**/  
functionremoveToInsertLater(element){  
varparentNode=element.parentNode;  
varnextSibling=element.nextSibling;  
parentNode.removeChild(element);  
returnfunction(){  
if(nextSibling){  
parentNode.insertBefore(element,nextSibling);  
}else{  
parentNode.appendChild(element);  
}  
};  
} 

有了上面这个函数，现在我们就可以在一个不需要解析渲染的元素上面修改那些超链接了。这样只在移除和插入元素的时候各触发一次重解析。 

functionupdateAllAnchors(element,anchorClass){  
varinsertFunction=removeToInsertLater(element);  
varanchors=element.getElementsByTagName('a');  
for(vari=0,length=anchors.length;i<length;i++){  
anchors[i].className=anchorClass;  
}  
insertFunction();  
}