Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

    Start ReadingShare
    DOM Enlightenment

    • DOM Enlightenment

    • By:

    • Publisher: O'Reilly Media, Inc.

    • Pub. Date:

    • Print ISBN-13: 978-1-4493-4284-5

    • Pages in Print Edition: 180

    • Subscriber Rating: 4 out of 5 rating4 [1 Rating] Subscriber Reviews

    1ebooken
    Subscriber Reviews • Browse Similar Topics

    Overview

    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 to demonstrate how various node objects work.

    Subscriber Reviews

    Average Rating: 4 out of 5 rating Based on 1 Rating

    "Just FYI" - by danomanion on 20-FEB-2013
    Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
    Just FYI, a draft copy of this book looks to be available at http://domenlightenment.com/ if you'd like to read more before adding to your bookshelf.
    Report as Inappropriate

    Table of Contents

     

    View Sample

    DOM Enlightenment

    View Sample

    Foreword

    View Sample
    Preface
    View Sample

    Who Should Read This Book

    View Sample

    Technical Intentions, Allowances, and Limitations

    View Sample

    License

    View Sample

    This Book Is Not Like Other Programming Books

    View Sample

    Color-Coding Conventions

    View Sample

    jsFiddle

    View Sample

    Conventions Used in This Book

    View Sample

    Using Code Examples

    View Sample

    Safari® Books Online

    View Sample

    How to Contact Us

    View Sample
    1. Node Overview
    View Sample

    1.1 The Document Object Model (a.k.a. the DOM) Is a Hierarchy/Tree of JavaScript Node Objects

    View Sample

    1.2 Node Object Types

    View Sample

    1.3 Subnode Objects Inherit From the Node Object

    View Sample

    1.4 Properties and Methods for Working with Nodes

    View Sample

    1.5 Identifying the Type and Name of a Node

    View Sample

    1.6 Getting a Node’s Value

    View Sample

    1.7 Using JavaScript Methods to Create Element and Text Nodes

    View Sample

    1.8 Using JavaScript Strings to Create and Add Element and Text Nodes to the DOM

    View Sample

    1.9 Extracting Parts of the DOM Tree as JavaScript Strings

    View Sample

    1.10 Using appendChild() and insertBefore() to Add Node Objects to the DOM

    View Sample

    1.11 Using removeChild() and replaceChild() to Remove and Replace Nodes

    View Sample

    1.12 Using cloneNode() to Clone Nodes

    View Sample

    1.13 Grokking Node Collections (i.e., NodeList and HTMLCollection)

    View Sample

    1.14 Getting a List/Collection of All Immediate Child Nodes

    View Sample

    1.15 Converting a NodeList or HTMLCollection to a JavaScript Array

    View Sample

    1.16 Traversing Nodes in the DOM

    View Sample

    1.17 Verifying a Node Position in the DOM Tree with contains() and compareDocumentPosition()

    View Sample

    1.18 Determining Whether Two Nodes Are Identical

    View Sample
    2. Document Nodes
    View Sample

    2.1 document Node Overview

    View Sample

    2.2 HTMLDocument Properties and Methods (Including Inherited)

    View Sample

    2.3 Getting General HTML Document Information (title, url, referrer, lastModified, and compatMode)

    View Sample

    2.4 document Child Nodes

    View Sample

    2.5 document Provides Shortcuts to <!DOCTYPE>, <html lang="en">, <head>, and <body>

    View Sample

    2.6 Using document.implementation.hasFeature() to Detect DOM Specifications/Features

    View Sample

    2.7 Getting a Reference to the Focus/Active Node in the Document

    View Sample

    2.8 Determining Whether the Document or Any Node Inside the Document Has Focus

    View Sample

    2.9 document.defaultView Is a Shortcut to the Head/Global Object

    View Sample

    2.10 Using ownerDocument to Get a Reference to the Document from an Element

    View Sample
    3. Element Nodes
    View Sample

    3.1 HTML*Element Object Overview

    View Sample

    3.2 HTML*Element Object Properties and Methods (Including Inherited)

    View Sample

    3.3 Creating Elements

    View Sample

    3.4 Getting the Tag Name of an Element

    View Sample

    3.5 Getting a List/Collection of Element Attributes and Values

    View Sample

    3.6 Getting, Setting, and Removing an Element’s Attribute Value

    View Sample

    3.7 Verifying Whether an Element Has a Specific Attribute

    View Sample

    3.8 Getting a List of Class Attribute Values

    View Sample

    3.9 Adding and Removing Subvalues to a Class Attribute

    View Sample

    3.10 Toggling a Class Attribute Value

    View Sample

    3.11 Determining Whether a Class Attribute Value Contains a Specific Value

    View Sample

    3.12 Getting and Setting data-* Attributes

    View Sample
    4. Element Node Selection
    View Sample

    4.1 Selecting a Specific Element Node

    View Sample

    4.2 Selecting/Creating a List (a.k.a. NodeList) of Element Nodes

    View Sample

    4.3 Selecting All Immediate Child Element Nodes

    View Sample

    4.4 Selecting Contextual Elements

    View Sample

    4.5 Preconfigured Selections/Lists of Element Nodes

    View Sample

    4.6 Using matchesSelector() to Verify That an Element Will Be Selected

    View Sample
    5. Element Node Geometry and Scrolling Geometry
    View Sample

    5.1 Element Node Size, Offsets, and Scrolling Overview

    View Sample

    5.2 Getting an Element’s offsetTop and offsetLeft Values Relative to the offsetParent

    View Sample

    5.3 Using getBoundingClientRect() to Get an Element’s Top, Right, Bottom, and Left Border Edge Offsets Relative to the Viewport

    View Sample

    5.4 Getting an Element’s Size (Border + Padding + Content) in the Viewport

    View Sample

    5.5 Getting an Element’s Size (Padding + Content) in the Viewport, Excluding Borders

    View Sample

    5.6 Using elementFromPoint() to Get the Topmost Element in the Viewport at a Specific Point

    View Sample

    5.7 Using scrollHeight and scrollWidth to Get the Size of the Element Being Scrolled

    View Sample

    5.8 Using scrollTop and scrollLeft to Get and Set Pixels Scrolled from the Top and Left

    View Sample

    5.9 Using scrollIntoView() to Scroll an Element into View

    View Sample
    6. Element Node Inline Styles
    View Sample

    6.1 Style Attribute (a.k.a. Element Inline CSS Properties) Overview

    View Sample

    6.2 Getting, Setting, and Removing Individual Inline CSS Properties

    View Sample

    6.3 Getting, Setting, and Removing All Inline CSS Properties

    View Sample

    6.4 Using getComputedStyle() to Get an Element’s Computed Styles (i.e., Actual Styles Including Any from the Cascade)

    View Sample

    6.5 Using the class and id Attributes to Apply and Remove CSS Properties on an Element

    View Sample
    7. Text Nodes
    View Sample

    7.1 Text Object Overview

    View Sample

    7.2 Text Object and Properties

    View Sample

    7.3 Whitespace Creates Text Nodes

    View Sample

    7.4 Creating and Injecting Text Nodes

    View Sample

    7.5 Getting a Text Node Value with .data or nodeValue

    View Sample

    7.6 Manipulating Text Nodes with appendData(), deleteData(), insertData(), replaceData(), and subStringData()

    View Sample

    7.7 When Multiple Sibling Text Nodes Occur

    View Sample

    7.8 Using textContent to Remove Markup and Return All Child Text Nodes

    View Sample

    7.9 The Difference Between textContent and innerText

    View Sample

    7.10 Using normalize() to Combine Sibling Text Nodes into One Text Node

    View Sample

    7.11 Using splitText() to Split a Text Node

    View Sample
    8. DocumentFragment Nodes
    View Sample

    8.1 DocumentFragment Object Overview

    View Sample

    8.2 Using createDocumentFragment() to Create DocumentFragments

    View Sample

    8.3 Adding a DocumentFragment to the Live DOM

    View Sample

    8.4 Using innerHTML on a Document Fragment

    View Sample

    8.5 Leaving Fragments Containing Nodes in Memory by Cloning

    View Sample
    9. CSS Stylesheets and CSS Rules
    View Sample

    9.1 CSS Stylesheet Overview

    View Sample

    9.2 Accessing All Stylesheets (i.e., CSSStylesheet Objects) in the DOM

    View Sample

    9.3 CSSStyleSheet Properties and Methods

    View Sample

    9.4 CSSStyleRule Overview

    View Sample

    9.5 CSSStyleRule Properties and Methods

    View Sample

    9.6 Using cssRules to Get a List of CSS Rules in a Stylesheet

    View Sample

    9.7 Using insertRule() and deleteRule() to Insert and Delete CSS Rules in a Stylesheet

    View Sample

    9.8 Using the .style Property to Edit the Value of a CSSStyleRule

    View Sample

    9.9 Creating a New Inline CSS Stylesheet

    View Sample

    9.10 Programmatically Adding External Stylesheets to an HTML Document

    View Sample

    9.11 Using the .disabled Property to Disable/Enable Stylesheets

    View Sample
    10. JavaScript in the DOM
    View Sample

    10.1 Inserting and Executing JavaScript Overview

    View Sample

    10.2 JavaScript Is Parsed Synchronously by Default

    View Sample

    10.3 Using defer to Defer the Downloading and Execution of External JavaScript

    View Sample

    10.4 Using async to Asynchronously Download and Execute External JavaScript Files

    View Sample

    10.5 Using Dynamic <script> Elements to Force Asynchronous Downloading and Parsing of External JavaScript

    View Sample

    10.6 Using the onload Callback for Asynchronous <script>s so That We Know When They’re Loaded

    View Sample

    10.7 Be Mindful of <script>s Placement in HTML for DOM Manipulation

    View Sample

    10.8 Getting a List of <script>s in the DOM

    View Sample
    11. DOM Events
    View Sample

    11.1 DOM Events Overview

    View Sample

    11.2 DOM Event Types

    View Sample

    11.3 The Event Flow

    View Sample

    11.4 Adding Event Listeners to Element Nodes, the window Object, and the document Object

    View Sample

    11.5 Removing Event Listeners

    View Sample

    11.6 Getting Event Properties from the Event Object

    View Sample

    11.7 The Value of this When Using addEventListener()

    View Sample

    11.8 Referencing the target of an Event and Not the Node or Object on Which the Event Is Invoked

    View Sample

    11.9 Using preventDefault() to Cancel Default Browser Events

    View Sample

    11.10 Using stopPropagation() to Stop the Event Flow

    View Sample

    11.11 Using stopImmediatePropagation() to Stop the Event Flow As Well As Other Like Events on the Same Target

    View Sample

    11.12 Custom Events

    View Sample

    11.13 Simulating/Triggering Mouse Events

    View Sample

    11.14 Event Delegation

    View Sample
    12. Creating dom.js: A Wishful jQuery-Inspired DOM Library for Modern Browsers
    View Sample

    12.1 dom.js Overview

    View Sample

    12.2 Creating a Unique Scope

    View Sample

    12.3 Creating dom() and GetOrMakeDom(), Globally Exposing dom() and GetOrMakeDom.prototype

    View Sample

    12.4 Creating an Optional Context Parameter Passed to dom()

    View Sample

    12.5 Populating an Object with DOM Node References Based on params and a Return Object

    View Sample

    12.6 Creating an each() Method and Making It a Chainable Method

    View Sample

    12.7 Creating html(), append(), and text() Methods

    View Sample

    12.8 Taking dom.js for a Spin

    View Sample

    12.9 Summary and Continuing with dom.js

    View Sample

    About the Author

    View Sample

    Colophon

    View Sample

    Copyright

    Extras

    The publisher has provided additional content related to this title.


    Description
    Content

    Visit the catalog page for DOM Enlightenment

    • Catalog Page

    Visit the errata page for DOM Enlightenment

    • Errata