DOM Batching
Mutation Observers

The scripts for these examples can be found in Book 2 of the *Programming Step-by-Step and More* guide.

Books 1 and 2 are available for purchase on Amazon.

Batching – Mutation Observers

10.20.6 Batching Updates

Example 1. Using document fragments

Example 2. Updating a JavaScript object and then assigning it to the DOM

Example 2 – Before
Example 2 – After

Example 3. Using DOM manipulation libraries

Element |p_207|

Element |p_208|

Element |p_206|

Element |p_206|

10.20.7 Mutation Observers

Example 1. Create an observer

Element |div id="myDiv_209"|

Element |P| Added

Example 2. Real-time validation of a Registration Form

Mutation Observers Cont.. – Performance Measurement

10.20.7 Mutation Observers

Example 3. Observe Text Changes in an Element

The text with id="observedText_211"

Example 4. Observe the Addition and Removal of Elements

The main node id="parentElement_212

Following Node

10.20.8 Performance Measurement

Example 1. Image Accordion

Image 1 Image 2 Image 3 Image 4 Image 5

10.20.9 Use Cases

See section 10.20.9 in Book 2 *Programming Step-by-Step and More*, Chapter 10