JavaScript DOM Dynamic Web interactive content Boot Camp

Zenler Player

Your course is loading. Hang tight.

Instructor intro to course
Resources
Course Introduction How to use content
Introduction to the DOM

Adding JavaScript to your webpage
document.getElementById JavaScript DOM Source Code example 1
Console Log Colorful Console Logs
Console JavaScript DOM Source Code example 2
Print to the console
Accessing the DOM Document Object Model
document.body DOM Source Code example 3
innerHTML vs TextContent Preview
Start getting Interactive
innerHTML DOM Source Code example 4
Why is JavaScript placed at the bottom
Define an element in a variable change the page HTML
outerHTML innerHTML DOM Source Code example 6
JavaScript and the DOM

CSS Selectors Finding a node
Challenge getElementsBY ID tag Class
Complex CSS selectors
Loop through classes DOM Source Code example 8
Access elements of an array
Challenge querySelectorAll
Working with CSS selector return and change values
querySelectorAll DOM Source Code example 9
Challenge href value write out
Accessing nodes and attributes within the DOM
DOM navigation childNodes DOM Source Code example 11
Traversing the DOM
Navigating the DOM Source Code example 10

Changing the HTML webpage with just JavaScript
Add Styles CSS DOM Source Code example 12
Challenge update all styles for elements with row as the class
getElementsByClassName DOM Source Code example 13
Working with Class names
Create an Element node Document Object Properties and Methods
setAttribute appendChild DOM Source Code example 15
Get image properties
Working with Images DOM Source Code example 16
Events addEventListener button Clicks
addEventListener DOM Source Code example 17
Challenge
Events DOM Source Code example 18
Class event listeners
More DOM event types
function(e) DOM Source Code example 19
Challenge Mouse Moving
mouseMover DOM Source Code example 20
DOM working with forms
Form element values DOM Source Code example 21
Challenge Valid email CHECK
Form value checks DOM Source Code example 22
preventing default Event Methods
preventDefault DOM Source Code example 23
Window Object Properties and Methods
Windows Objects DOM Source Code example 24
setInterval and repeats
setInterval DOM Source Code example 25
Animations with the DOM requestAnimationFrame method
requestAnimationFrame DOM Source Code example 26