DOM selectivity

Every HTML element on a page becomes a child of the DOM tree. It is by manipulating this DOM tree that our pages can have dynamic styles. If the tree gets too big, operations in the browser slow down and the user experience suffers. If we misuse the tree, entire parts of it will need to be recalculated, further decreasing performance. If we use a very deep (tag nesting) hierarchy, performance will also slow down. If we attach too many properties to all kinds of elements, page size will grow resulting in longer download times.

Execution time for DOM element selection with different JavaScript functions