The DOM in JavaScript, jQuery, AngularJS, and React

Learn how to use JavaScript, jQuery, Angular, and React to manipulate the HTML DOM tree and build dynamic websites.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. The DOM Tree

• Developer tools
• What is the DOM?
• The DOM tree
• nodeType and nodeName properties
• The Node interface
• The Document object
• The Document methods
• Element objects
• Modifying text in the DOM
• Event objects
• Window object
• CSS properties and the DOM
• Traversing the DOM tree

2. Manipulate the DOM with JavaScript

• Select elements with getElementById
• Select elements with getElementsByClassName
• Select groups of elements with getElementsByName
• Select elements with getElementsByTagName
• Add, append, and delete DOM nodes
• Updating content in place

3. jQuery and the DOM

• jQuery application structure
• Selecting content in the DOM

4. AngularJS and the DOM

• Angular application structure
• Updating the DOM tree
• From the DOM to directives

5. The React Virtual DOM

• React application structure
• The React virtual DOM approach
• Encapsulating code in components
• Live updates for content

Conclusion

• Next steps