JavaScript/Notes/ClassnameSwap

ClassName Swap, Language Review, RTFM, by Garrett Smith

This class shows a simple, efficient trick using event bubbling and css cascade:

Event flow is defined by DOM Events specification [1] File:Http://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.png

CSS Cascade is defined in CSS2: [2]

Lesson: CSS ClassName Swap

By changing an element's className multiple styles can be changed at one time.

Using the descendant selector, and changing the className of an ancestor element, multiple elements can be updated simultaneously, with a modicum of highly efficient code.

For Styles, replace a loop that applies styles to descendants by adding a class token to the nearest common ancestor (example, explanation).

Calculating Selector's Specificity (CSS 2.1).

The classname swap example leverages the fact that class selectors (e.g. .foo) have higher specificity than element selectors (e.g. tr).

CSS Selector specificity is determined four numbers, a-b-c-d, in a number system with a large base.

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) count the number of ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) count the number of element names and pseudo-elements in the selector (= d)

JavaScript Review

Functions

• FunctionExpression vs FunctionDeclaration, MemberExpression, PropertyAccessor and Square Brackets.

Specifications

• ECMAScript 1.3 and ECMAScript 5.1

Other versions of ECMAScript, including E4X and Compact, are out of scope for this class.

FAQ

FAQ, is currently being ported to Github! Get involved!