@@ -931,7 +931,7 @@ var IAmSingleton;
931931* assign DOM references to local variables and work with those
932932* use selectors API (since IE8)
933933* cache length when iterating over HTML collections (old IE versions)
934- * using ids was the fastest way to access DOM elements
934+ * using ids is the fastest way to access DOM elements
935935
936936```js
937937//var it up
@@ -940,3 +940,46 @@ var hey = document.getElementById('hey');
940940document.querySelector('.hello');
941941document.querySelectorAll('.hello');
942942```
943+
944+ ### DOM manipulation
945+
946+ * in addition to accessing you often want to add/remove/modify DOM elements
947+ * updates to DOM can be really expensive, fewer the better
948+ * can cause a browser to repaint the screen
949+ * can also cause a reflow - recalculating the elements geometry
950+
951+ ### batch DOM additions
952+
953+ * do batch additon to DOM, and try doing them outside of the live tree
954+
955+ ```js
956+ //create elements outside of live tree
957+ var paragraph = document.createElement('p');
958+ var text = document.createTextNode('some text');
959+ paragraph.appendChild(text);
960+ //add it at the end
961+ document.body.appendChild(paragraph);
962+ ```
963+
964+ * use a document fragment if no parent element otherwise
965+ ```js
966+ //create a fragment if the elements you're adding don't have a parent
967+ var fragment = document.createDocumentFragment();
968+ fragment.appendChild(document.createElement('p'));
969+ fragment.appendChild(document.createElement('p'));
970+ //add fragment at the end
971+ document.body.appendChild(fragment);
972+ ```
973+
974+ ### batch DOM updates
975+
976+ * you can make a clone of the root of the subtree you're changing
977+ * then swap your clone with the original
978+
979+ ```js
980+ var oldNode = document.getElementById('result');
981+ var clone = oldNode.cloneNode(true);
982+ //... make your changes
983+ //then replace
984+ oldnode.parentNode.replaceChild(clone, oldNode);
985+ ```
0 commit comments