12. Repaints and Reflow
document
1
使元素脱离文档流
div div
div div div div
2
3 对其运用多重改变
把元素带回文档中
div div div div
13. • function hideElement(){
隐藏元素 var ul = document.getElementById('mylist');
ul.style.display = "none";
……doSomethingTo_UL();
{display:none} ul.style.display = "block";
}
• function useFragment(){
文档片段 var fragment = document.createDocumentFragment();
……doSomethingTo_fragment ();
{document fragment} }
document.getElementById('mylist').appendChild(fragment);
• function useCopy(){
var old = document.getElementById('mylist');
创建备份 var clone = old.cloneNode(true);
{element.cloneNode}
……doSomethingTo_clone ();
old.parentNode.replaceChild(clone, old);
}
14. Event Delegation
window 5
冒泡
document 4
html 3
到达目标
body 2
捕获(非IE) div 1
15. DOM Scripting
function domAM(){
var newD = document.createElement(“div”);
var newDChildren = newD.childNodes;
var newDSomeChildren = newD.getElementById(“menu”).getElementsByTagName(“a”);
}
function domAM_new(){
var newD = existD.cloneNode(true);
var newDChild = newD.children;
var newDSomChildren = newD.querySelectorAll(“#menu a”);
}
16. DOM Scripting
function domAM(){
var divs = document. getElementsByTagName(“div”);
for(var i = 0; i < divs.length; i++){
document.body.appendChild(document.createElement(‘div’));
document.getElementsByTagName(“div”)*i+.style.backgroundColor = “#fff”;
document.getElementsByTagName(“div”)*i+….
document.getElementsByTagName(“div”)*i+.style.border = “1px solid #e00”;
}
}
function domAM_new(){
var divs = document. getElementsByTagName(“div”);
for(var i = 0, l = divs.length; i < l; i++){
document.body.appendChild(document.createElement(‘div’));
var d = divs[i];
d.style.backgroundColor = “#fff”;
d….
d.style.border = “1px solid #e00”;
}
}