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