The DOM in JavaScript, jQuery, AngularJS, and React
Overview
Learn how to use JavaScript, jQuery, Angular, and React to manipulate the HTML DOM tree and build dynamic websites.
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.
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.
Syllabus
Introduction
- Welcome
- What you should know
- Using the exercise files
- 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
- 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
- jQuery application structure
- Selecting content in the DOM
- Angular application structure
- Updating the DOM tree
- From the DOM to directives
- React application structure
- The React virtual DOM approach
- Encapsulating code in components
- Live updates for content
- Next steps
Taught by
Christian Hur
Related Courses
Reviews
0.0 rating, based on 0 reviews
Never Stop Learning!
