Academy Library : Class Notes

DOM Manipulation

Learning resources from the Prescription Free Academy of Web Development and Software Engineering.

"Master software engineering for the web with teaching and mentoring available seven days."

« Back to Class Notes

You’re reading our Class Notes collection. It features summaries of important topics along with quality links to learn more.

This document is considered stable. Updates are made but what is here is considered enough as it stands to do the title justice.

DOM Manipulation

Querying
Creating
Appending
Removing
Template Tag
Caching DOM References
Having a Render Layer
Virtual DOM
Building Tree Structures by Hand
Use Classes for Changing Styles
Shadow DOM
Custom Elements
Web Components
Frameworks

Where to Study This

Introduction to the DOM
Introduction to the DOM - Web APIs | MDN

The Document Interface
Document - Web APIs | MDN

The HTMLDocument Interface
HTMLDocument - Web APIs | MDN

Manipulating Documents
Manipulating documents - Learn web development | MDN

Locating DOM Elements Using Selectors
Locating DOM elements using selectors - Web APIs | MDN

Element Instance Methods
Element - Web APIs | MDN

The Node Interface
Node - Web APIs | MDN

The NodeList Interface
NodeList - Web APIs | MDN

Comparing Methods for Appending and Inserting with JavaScript
Comparing Methods For Appending And Inserting With JavaScript | CSS-Tricks

JavaScript DOM Manipulation Cheat Sheet
Cheat Sheet

append vs. appendChild
append VS appendChild - DEV Community

textContent
Node: textContent property - Web APIs | MDN

innerText
HTMLElement: innerText property - Web APIs | MDN

textContent: Differences from innerText
Node: textContent property - Web APIs | MDN

Historical: innerText vs. textContent
kelly norton: innerText vs. textContent
javascript - Difference between textContent vs innerText - Stack Overflow

DOM Manipulation Handbook
The JavaScript DOM Manipulation Handbook

Advanced Techniques and Performance
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Boost

The Template Tag
The Template Tag

Using Templates and Slots
Using templates and slots - Web APIs | MDN

Virtual DOM
Virtual DOM - Wikipedia

Virtual DOM Explained
Virtual DOM Explained

Using Shadow DOM
Using shadow DOM - Web APIs | MDN

Declarative Shadow DOM
Declarative Shadow DOM | web.dev

Using Custom Elements
Using custom elements - Web APIs | MDN

Web Components
Web Components - Web APIs | MDN

Web Components Introduction
A Complete Introduction to Web Components in 2024

Web Components Series (Template Tag, Custom Elements, Shadow DOM)
An Introduction To Web Components | CSS-Tricks

Lit
Lit

« Back to Class Notes

Library Menu