Williammer
6/9/2014 - 1:33 AM

jsPerform.domPract.js - several performance efficient ways to manipulate dom.

jsPerform.domPract.js - several performance efficient ways to manipulate dom.

//use ECMA5 selector api.
document.querySelector("ul .selected");
document.querySelectorAll("#widget .class");

//use documentFragment to cache dom elements
var p, t, frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);

//use cloneNode to copy node and change on it.
var oldnode = document.getElementById('result'),
    clone = oldnode.cloneNode(true);
// work with the clone...
// when you're done: 
oldnode.parentNode.replaceChild(clone, oldnode);