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 4. Element Node Selection

4.1 Selecting a Specific Element Node

The most common methods for getting a reference to a single element node are:

querySelector()
getElementById()

In the following code, I leverage both of these methods to select an element node from the HTML document.

Live code

<!DOCTYPE html>
<html lang="en">
<body>

<ul>
<li>Hello</li>
<li>big</li>
<li>bad</li>
<li id="last">world</li>
</ul>

<script>

console.log(document.querySelector('li').textContent); //logs Hello
console.log(document.getElementById('last').textContent); //logs world

</script>
</body>
</html>

The getElementById() method is pretty simple compared to the more robust querySelector() method. The querySelector() method permits a parameter in the form of a CSS selector syntax. Basically, you can pass this method a CSS3 selector (e.g., #score>tbody>tr>td:nth-of-type(2)), which it will use to select a single element in the DOM.

Notes

querySelector() will return the first node element found in the document based on the selector. For example, in the preceding code, I pass a selector that will select all the <li> elements in CSS, but only the first one is returned.

querySelector() is also defined on element nodes. This allows the method to limit its results to a specific vein of the DOM tree, thereby enabling context quering.

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

The most common methods for selecting/creating a list of nodes in an HTML document are:

querySelectorAll()
getElementsByTagName() ...

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 4. Element Node Selection