The DOM in JavaScript, jQuery, AngularJS, and React

5h 1mIntermediate2017-08-14

Authors

Christian Hur

IT and Web Instructor at Gateway Technical College

Course details

The HTML DOM (Document Object Model) opens up exciting new ways to create dynamic websites. Learn the different ways a developer can manipulate the DOM tree using common web technologies. Instructor Christian Hur introduces the DOM and shows how DOM elements are arranged and constructed. Next, he reviews the built-in web browser developer tools and uses them to quickly manipulate the DOM in a temporary virtual environment (stateless mode). Once the foundations are covered, you can explore the dramatically different approaches to DOM manipulation taken by libraries and frameworks like jQuery, Angular, and React. Exploring the similarities and differences will give you the confidence to choose and switch between tools.

Learning objectives
What is the DOM?
Working with properties, objects, and methods
Traversing the DOM tree
Manipulating elements with JavaScript
Adding, appending, and deleting nodes with JavaScript
Selecting content in the DOM with jQuery
Updating the DOM tree with jQuery or AngularJS
Making live updates for content
Understanding React's virtual DOM approach

Skills covered

JavaScript FrameworksFront-End Web DevelopmentWeb DevelopmentProgramming LanguagesSoftware DevelopmentOne-Off

Concepts

0. Introduction

01 - Welcome
02 - What you should know
03 - Using the exercise files

1. The DOM Tree

04 - Developer tools
05 - What is the DOM
06 - The DOM tree
07 - nodeType and nodeName properties
08 - The Node interface
09 - The Document object
10 - The Document methods
11 - Element objects
12 - Modifying text in the DOM
13 - Event objects
14 - Window object
15 - CSS properties and the DOM
16 - Traversing the DOM tree

2. Manipulate the DOM with JavaScript

17 - Select elements with getElementById
18 - Select elements with getElementsByClassName
19 - Select groups of elements with getElementsByName
20 - Select elements with getElementsByTagName
21 - Add, append, and delete DOM nodes
22 - Updating content in place

3. jQuery and the DOM

23 - jQuery application structure
24 - Selecting content in the DOM

4. AngularJS and the DOM

25 - Angular application structure
26 - Updating the DOM tree
27 - From the DOM to directives

5. The React Virtual DOM

28 - React application structure
29 - The React virtual DOM approach
30 - Encapsulating code in components
31 - Live updates for content

Conclusion

32 - Next steps