Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

In this video we'll dive into the DOM (Document Object Model) in JavaScript. We explore DOM selectors, modifying CSS with selectors, HTML Collections, Nodes and Nodelists, navigating the DOM tree, and both removing and creating elements and nodes in the DOM.

▶ This video is part of the JavaScript Tutorials for Beginners Playlist found here: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Oi6xNtL_fwCrwpuqylMsgT

HTML & CSS source code: https://gist.github.com/gitdagray/dbe70d25d897662c1dc4f4c179883e01

Quick Concepts outline:
(00:00) Intro
(0:13) The Document Object Model: DOM
(0:55) Selecting an element with an ID
(2:55) Selecting an element with a query selector
(4:00) Changing the CSS with the style property
(5:45) Selecting elements by class name
(7:05) Selecting elements with querySelectorAll()
(8:10) HTMLCollection vs NodeList
(9:00) Searching within the results of a previous selector
(10:15) Selecting elements by tag name
(11:20) Applying more specific DOM selectors
(13:05) Modifying CSS with a DOM selector
(16:30) Changing text inside of an element
(17:00) Changing the HTML within a parent element
(19:54) Navigating the DOM tree
(28:40) Removing all the nodes in a parent element
(30:00) Creating new elements
(30:43) Adding new property values to the element
(32:15) Appending the new element to the DOM
(33:30) Creating new elements with a loop

Further Reading:
MDN Web Docs:
Document Object Model (DOM): https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Introduction to the DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Eloquent JavaScript Chapter 14:
https://eloquentjavascript.net/14_dom.html

More Beginner JS Videos:
freeCodeCamp: https://youtu.be/PkZNo7MFNFg
Traversy Media: https://youtu.be/hdI2bqOjy3c
The Net Ninja: https://youtu.be/iWOYAxlnaww

Follow Me:
Twitter: https://twitter.com/yesdavidgray
Reddit: https://www.reddit.com/user/DaveOnEleven
Medium: https://medium.com/@davegray_86804

#dom #javascript #tutorial