Javascript Tutorials for Beginners - JavaScript DOM Tutorial | Document Object Model in JavaScript

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