book

DOM Enlightenment

Name: DOM Enlightenment
Author: Cody Lindley
ISBN: 9781449342845

by Cody Lindley

February 2013

Intermediate to advanced

178 pages

3h 2m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Foreword
Preface
Who Should Read This BookTechnical Intentions, Allowances, and LimitationsLicenseThis Book Is Not Like Other Programming BooksColor-Coding ConventionsjsFiddleConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact Us
1. Node Overview
1.1 The Document Object Model (a.k.a. the DOM) Is a Hierarchy/Tree of JavaScript Node Objects1.2 Node Object Types1.3 Subnode Objects Inherit From the Node Object1.4 Properties and Methods for Working with Nodes1.5 Identifying the Type and Name of a Node1.6 Getting a Node’s Value1.7 Using JavaScript Methods to Create Element and Text Nodes1.8 Using JavaScript Strings to Create and Add Element and Text Nodes to the DOM1.9 Extracting Parts of the DOM Tree as JavaScript Strings1.10 Using appendChild() and insertBefore() to Add Node Objects to the DOM1.11 Using removeChild() and replaceChild() to Remove and Replace Nodes1.12 Using cloneNode() to Clone Nodes1.13 Grokking Node Collections (i.e., NodeList and HTMLCollection)1.14 Getting a List/Collection of All Immediate Child Nodes1.15 Converting a NodeList or HTMLCollection to a JavaScript Array1.16 Traversing Nodes in the DOM1.17 Verifying a Node Position in the DOM Tree with contains() and compareDocumentPosition()1.18 Determining Whether Two Nodes Are Identical
2. Document Nodes
2.1 document Node Overview2.2 HTMLDocument Properties and Methods (Including Inherited)2.3 Getting General HTML Document Information (title, url, referrer, lastModified, and compatMode)2.4 document Child Nodes2.5 document Provides Shortcuts to <!DOCTYPE>, <html lang="en">, <head>, and <body>2.6 Using document.implementation.hasFeature() to Detect DOM Specifications/Features2.7 Getting a Reference to the Focus/Active Node in the Document2.8 Determining Whether the Document or Any Node Inside the Document Has Focus2.9 document.defaultView Is a Shortcut to the Head/Global Object2.10 Using ownerDocument to Get a Reference to the Document from an Element
3. Element Nodes
3.1 HTML*Element Object Overview3.2 HTML*Element Object Properties and Methods (Including Inherited)3.3 Creating Elements3.4 Getting the Tag Name of an Element3.5 Getting a List/Collection of Element Attributes and Values3.6 Getting, Setting, and Removing an Element’s Attribute Value3.7 Verifying Whether an Element Has a Specific Attribute3.8 Getting a List of Class Attribute Values3.9 Adding and Removing Subvalues to a Class Attribute3.10 Toggling a Class Attribute Value3.11 Determining Whether a Class Attribute Value Contains a Specific Value3.12 Getting and Setting data-* Attributes
4. Element Node Selection
4.1 Selecting a Specific Element Node4.2 Selecting/Creating a List (a.k.a. NodeList) of Element Nodes4.3 Selecting All Immediate Child Element Nodes4.4 Selecting Contextual Elements4.5 Preconfigured Selections/Lists of Element Nodes4.6 Using matchesSelector() to Verify That an Element Will Be Selected
5. Element Node Geometry and Scrolling Geometry
5.1 Element Node Size, Offsets, and Scrolling Overview5.2 Getting an Element’s offsetTop and offsetLeft Values Relative to the offsetParent5.3 Using getBoundingClientRect() to Get an Element’s Top, Right, Bottom, and Left Border Edge Offsets Relative to the Viewport5.4 Getting an Element’s Size (Border + Padding + Content) in the Viewport5.5 Getting an Element’s Size (Padding + Content) in the Viewport, Excluding Borders5.6 Using elementFromPoint() to Get the Topmost Element in the Viewport at a Specific Point5.7 Using scrollHeight and scrollWidth to Get the Size of the Element Being Scrolled5.8 Using scrollTop and scrollLeft to Get and Set Pixels Scrolled from the Top and Left5.9 Using scrollIntoView() to Scroll an Element into View
6. Element Node Inline Styles
6.1 Style Attribute (a.k.a. Element Inline CSS Properties) Overview6.2 Getting, Setting, and Removing Individual Inline CSS Properties6.3 Getting, Setting, and Removing All Inline CSS Properties6.4 Using getComputedStyle() to Get an Element’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 Properties on an Element
7. Text Nodes
7.1 Text Object Overview7.2 Text Object and Properties7.3 Whitespace Creates Text Nodes7.4 Creating and Injecting Text Nodes7.5 Getting a Text Node Value with .data or nodeValue7.6 Manipulating Text Nodes with appendData(), deleteData(), insertData(), replaceData(), and subStringData()7.7 When Multiple Sibling Text Nodes Occur7.8 Using textContent to Remove Markup and Return All Child Text Nodes7.9 The Difference Between textContent and innerText7.10 Using normalize() to Combine Sibling Text Nodes into One Text Node7.11 Using splitText() to Split a Text Node
8. DocumentFragment Nodes
8.1 DocumentFragment Object Overview8.2 Using createDocumentFragment() to Create DocumentFragments8.3 Adding a DocumentFragment to the Live DOM8.4 Using innerHTML on a Document Fragment8.5 Leaving Fragments Containing Nodes in Memory by Cloning

9. CSS Stylesheets and CSS Rules
9.1 CSS Stylesheet Overview9.2 Accessing All Stylesheets (i.e., CSSStylesheet Objects) in the DOM9.3 CSSStyleSheet Properties and Methods9.4 CSSStyleRule Overview9.5 CSSStyleRule Properties and Methods9.6 Using cssRules to Get a List of CSS Rules in a Stylesheet9.7 Using insertRule() and deleteRule() to Insert and Delete CSS Rules in a Stylesheet9.8 Using the .style Property to Edit the Value of a CSSStyleRule9.9 Creating a New Inline CSS Stylesheet9.10 Programmatically Adding External Stylesheets to an HTML Document9.11 Using the .disabled Property to Disable/Enable Stylesheets
10. JavaScript in the DOM
10.1 Inserting and Executing JavaScript Overview10.2 JavaScript Is Parsed Synchronously by Default10.3 Using defer to Defer the Downloading and Execution of External JavaScript10.4 Using async to Asynchronously Download and Execute External JavaScript Files10.5 Using Dynamic <script> Elements to Force Asynchronous Downloading and Parsing of External JavaScript10.6 Using the onload Callback for Asynchronous <script>s so That We Know When They’re Loaded10.7 Be Mindful of <script>s Placement in HTML for DOM Manipulation10.8 Getting a List of <script>s in the DOM
11. DOM Events
11.1 DOM Events Overview11.2 DOM Event Types11.3 The Event Flow11.4 Adding Event Listeners to Element Nodes, the window Object, and the document Object11.5 Removing Event Listeners11.6 Getting Event Properties from the Event Object11.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 Invoked11.9 Using preventDefault() to Cancel Default Browser Events11.10 Using stopPropagation() to Stop the Event Flow11.11 Using stopImmediatePropagation() to Stop the Event Flow As Well As Other Like Events on the Same Target11.12 Custom Events11.13 Simulating/Triggering Mouse Events11.14 Event Delegation
12. Creating dom.js: A Wishful jQuery-Inspired DOM Library for Modern Browsers
12.1 dom.js Overview12.2 Creating a Unique Scope12.3 Creating dom() and GetOrMakeDom(), Globally Exposing dom() and GetOrMakeDom.prototype12.4 Creating an Optional Context Parameter Passed to dom()12.5 Populating an Object with DOM Node References Based on params and a Return Object12.6 Creating an each() Method and Making It a Chainable Method12.7 Creating html(), append(), and text() Methods12.8 Taking dom.js for a Spin12.9 Summary and Continuing with dom.js
About the Author
Colophon
Copyright

Content preview from DOM Enlightenment

Chapter 1. Node Overview

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

When you write an HTML document, you encapsulate HTML content inside other HTML content. By doing this, you set up a hierarchy that can be expressed as a tree. Often this hierarchy or encapsulation system is indicated visually by indenting markup in an HTML document. The browser, when loading the HTML document, interrupts and parses this hierarchy to create a tree of node objects that simulates how the markup is encapsulated.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML</title>
    </head>
    <body>
        <!-- Add your content here-->
    </body>
</html>

The preceding HTML code, when parsed by a browser, creates a document that contains nodes structured in a tree format (i.e., DOM). In Figure 1-1, I reveal the tree structure from the preceding HTML document using Opera’s Dragonfly DOM Inspector.

Figure 1-1. Viewing a web page in Opera Dragonfly Developer Tools

On the left, you see the HTML document in its tree form. And on the right, you see the corresponding JavaScript object that represents the selected element on the left. For example, the selected <body> element, highlighted in blue, is an element node and an instance of the HTMLBodyElement interface.

What you should take away here is that HTML documents get parsed by a browser and converted into a tree structure of node objects ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781449344498Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

DOM Enlightenment

by Cody Lindley

Chapter 1. Node Overview

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

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.