DOM Enlightenment. Exploring JavaScript and the Modern DOM 22088

With DOM Enlightenment, you'll learn how to manipulate HTML more efficiently by scripting the Document Object Model (DOM) without a DOM library. Using code examples in cookbook style, author Cody Lindley (jQuery Cookbook) walks you through modern DOM concepts how to demonstrate various node objects work.

Over the past decade, developers have the buried DOM under frameworks that simplify its use. This book brings these tools back into focus, using concepts and native code to modern browsers. If you have JavaScript experience, you'll understand the role jQuery plays in DOM scripting, and learn how to use the DOM directly in applications for mobile devices and specific browsers that require low overhead.

Understand JavaScript node objects and their relationship to the DOM
Learn the properties and methods of document, element, text, and DocumentFragment objects
Delve into element node selecting, geometry, and inline styles
Add CSS style sheets to an HTML document and use CSSStyleRule objects
Set up DOM events by using different code patterns
Learn the author's vision for dom.js, a jQuery-inspired DOM Library for modern browsers

Chapter 1 : Node Overview
1.1 The Document Object Model (a.k.a. the DOM) Is a Hierarchy/Tree of JavaScript Node Objects
1.2 Node Object Types
1.3 Subnode Objects Inherit From the Node Object
1.4 Properties and Methods for Working with Nodes
1.5 Identifying the Type and Name of a Node
1.6 Getting a Node's Value
1.7 Using JavaScript Methods to Create Element and Text Nodes
1.8 Using JavaScript Strings to Create and Add Element and Text Nodes to the DOM
1.9 Extracting Parts of the DOM Tree as JavaScript Strings
1.10 Using appendChild() and insertBefore() to Add Node Objects to the DOM
1.11 Using removeChild() and replaceChild() to Remove and Replace Nodes
1.12 Using cloneNode() to Clone Nodes
1.13 Grokking Node Collections (i.e., NodeList and HTMLCollection)
1.14 Getting a List/Collection of All Immediate Child Nodes
1.15 Converting a NodeList or HTMLCollection to a JavaScript Array
1.16 Traversing Nodes in the DOM
1.17 Verifying a Node Position in the DOM Tree with contains() and compareDocumentPosition()
1.18 Determining Whether Two Nodes Are Identical
Chapter 2 : Document Nodes
2.1 document Node Overview
2.2 HTMLDocument Properties and Methods (Including Inherited)
2.3 Getting General HTML Document Information (title, url, referrer, lastModified, and compatMode)
2.4 document Child Nodes
2.5 document Provides Shortcuts to <!DOCTYPE> <html lang="en"> <head>, and <body>
2.6 Using document.implementation.hasFeature() to Detect DOM Specifications/Features
2.7 Getting a Reference to the Focus/Active Node in the Document
2.8 Determining Whether the Document or Any Node Inside the Document Has Focus
2.9 document.defaultView Is a Shortcut to the Head/Global Object
2.10 Using ownerDocument to Get a Reference to the Document from an Element
Chapter 3 : Element Nodes
3.1 HTML*Object Element Overview
3.2 HTML*Element Object Properties and Methods (Including Inherited)
3.3 Creating Elements
3.4 Getting the Tag Name of an Element
3.5 Getting a List/Collection of Element Attributes and Values
3.6 Getting, Setting, and Removing an Element's s Attribute Value
3.7 Verifying Whether an Element Has a Specific Attribute
3.8 Getting a List of Class Attribute Values
3.9 Adding and Removing Subvalues to a Class Attribute
3.10 Toggling a Class Attribute Value
3.11 Determining Whether a Class Attribute Value Contains a Specific Value
3.12 Getting and Setting data-* Attributes
Chapter 4 : Element Node Selection
4.1 Selecting a Specific Element Node
4.2 Selecting/Creating a List (a.k.a. NodeList) Nodes of Element
4.3 Selecting All Immediate Child Element Nodes
4.4 Selecting Contextual Elements
4.5 Preconfigured Selections/Lists of Element Nodes
4.6 Using matchesSelector() to Verify That an Element Will Be Selected
Chapter 5 : Element Node Geometry and Scrolling Geometry
5.1 Element Node Size, Offsets, and Scrolling Overview
5.2 Getting an Element's s offsetTop and offsetLeft Values Relative to the offsetParent
5.3 Using getBoundingClientRect() to Get an Element's s Top, Right, Bottom, and Left Border Edge Offsets Relative to the Viewport
5.4 Getting an Element's s Size (Border + Padding + Content) in the Viewport
5.5 Getting an Element's s Size (Padding + Content) in the Viewport, Excluding Borders
5.6 Using elementFromPoint() to Get the Topmost Element in the Viewport at a Specific Point
5.7 Using scrollHeight and scrollWidth to Get the Size of the Element Being Scrolled
5.8 Using scrollTop and scrollLeft to Get and Set Pixels Scrolled from the Top and Left
5.9 Using scrollIntoView() to Scroll an Element into View
Chapter 6 : Element Node Inline Styles
6.1 Style Attribute (a.k.a. Element Inline CSS Властивості) Overview
6.2 Getting, Setting, and Removing Individual Inline CSS Properties
6.3 Getting, Setting, and Removing All Inline CSS Properties
6.4 Using getComputedStyle() to Get an Element's s Computed Styles (i.e., Actual Styles Including Any from the Cascade)
6.5 Using the class and id Attributes to Apply and Remove CSS Властивості on an Element
Chapter 7 : Text Nodes
7.1 Text Object Overview
7.2 Text Object and Properties
7.3 Whitespace Creates Text Nodes
7.4 Creating and Injecting Text Nodes
7.5 Getting a Text Node Value with .data or nodeValue
7.6 Manipulating Text Nodes with appendData(), deleteData(), insertData(), replaceData(), and subStringData()
7.7 When Multiple Sibling Text Nodes Occur
7.8 Using textContent to Remove Markup and Return All Child Text Nodes
7.9 The Difference Between textContent and innerText
7.10 Using normalize() to Combine Sibling Text Nodes into One Text Node
7.11 Using splitText() to Split a Text Node
Chapter 8 : DocumentFragment Nodes
8.1 DocumentFragment Object Overview
8.2 Using createDocumentFragment() to Create DocumentFragments
8.3 Adding a DocumentFragment to the Live DOM
8.4 Using innerHTML on a Document Fragment
8.5 Leaving Fragments Containing Nodes in Memory by Cloning
Chapter 9 : CSS Stylesheets and CSS Rules
9.1 CSS Stylesheet Overview
9.2 Accessing All Stylesheets (i.e., CSSStylesheet Objects) in the DOM
9.3 CSSStyleSheet Properties and Methods
9.4 CSSStyleRule Overview
9.5 CSSStyleRule Properties and Methods
9.6 Using cssRules to Get a List of CSS Rules in a Stylesheet
9.7 Using insertRule() and deleteRule() to Insert and Delete CSS Rules in a Stylesheet
9.8 Using the .style Property to Edit the Value of a CSSStyleRule
9.9 Creating a New Inline CSS Stylesheet
9.10 Programmatically Adding External Stylesheets to an HTML Document
9.11 Using the .disabled Property to Disable/Enable Stylesheets
Chapter 10 : JavaScript in the DOM
10.1 Inserting and Executing JavaScript Overview
10.2 JavaScript Is Parsed Synchronously by Default
10.3 Using defer to Defer Downloading the and Execution of External JavaScript
10.4 Using async to Asynchronously Download and Execute External JavaScript Files
10.5 Using Dynamic <script> Elements to Force Asynchronous Downloading and Parsing of External JavaScript
10.6 Using the onload Callback for Asynchronous <script>s so That We Know When they're Loaded
10.7 Be Mindful of <script>s Placement in for HTML DOM Manipulation
10.8 Getting a List of <script>s in the DOM
Chapter 11 : DOM Events
11.1 DOM Events Overview
11.2 DOM Event Types
11.3 The Event Flow
11.4 Adding Event Listeners Element to Nodes, the window Object, and the document Object
11.5 Removing Event Listeners
11.6 Getting Event Properties from the Event Object
11.7 The Value of this When Using addEventListener. ()
11.8 Referencing the target of an Event and Not the Node or Object on Which the Event Is Invoked
11.9 Using preventDefault() to Cancel Default Browser Events
11.10 Using stopPropagation() to Stop the Event Flow
11.11 Using stopImmediatePropagation() to Stop the Event Flow As Well As Other Like Events on the Same Target
11.12 Custom Events
11.13 Simulating/Triggering Mouse Events
11.14 Event Delegation
Chapter 12 : Creating dom.js: A Wishful jQuery-Inspired DOM Library for Modern Browsers
12.1 dom.js Overview
12.2 Creating a Unique Scope
12.3 Creating dom() and GetOrMakeDom(), Globally Exposing dom() and GetOrMakeDom.prototype
12.4 Creating an Optional Context Parameter Passed to dom()
12.5 Populating an Object with DOM Node References Based on params and a Return Object
12.6 Creating an each() Method and Making It a Chainable Method
12.7 Creating (html), append(), and text() Methods
12.8 Taking dom.js for a Spin
12.9 Summary and Continuing with dom.js
Colophon