@@ -914,3 +914,29 @@ var IAmSingleton;
914914* proxy - alternative interface, sitting in front of object
915915* mediator - separate object providing communication instead of loose coupling
916916* observer - publish/subscribe to aid loose coupling, widely used in JavaScript
917+
918+ ## 8. DOM and browser patterns
919+
920+ ### separation of concerns
921+
922+ * content - HTML, presentation - CSS, behaviour - JS
923+ * progressive enhancement - basic HTML should work, too
924+ * no inline JS (```onclick```) or CSS (```style``` attribute)
925+ * JS - capability detection instead of browser sniffing
926+
927+ ### DOM access
928+
929+ * DOM access is expensive and should be kept to minimum
930+ * avoid DOM access in loops
931+ * assign DOM references to local variables and work with those
932+ * use selectors API (since IE8)
933+ * cache length when iterating over HTML collections (old IE versions)
934+ * using ids was the fastest way to access DOM elements
935+
936+ ```js
937+ //var it up
938+ var hey = document.getElementById('hey');
939+ //use selectors API
940+ document.querySelector('.hello');
941+ document.querySelectorAll('.hello');
942+ ```
0 commit comments