JavaScript DOM Tutorial Document Object Model in JavaScript
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=WbG86sMd3SU
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: • Javascript Tutorials for Beginners • 🔗 HTML CSS source code: https://gist.github.com/gitdagray/dbe... • ✅ 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/d... • Introduction to the DOM: https://developer.mozilla.org/en-US/d... • Eloquent JavaScript Chapter 14: • https://eloquentjavascript.net/14_dom... • 📺 More Beginner JS Videos: • freeCodeCamp: • Learn JavaScript - Full Course for Be... • Traversy Media: • JavaScript Crash Course For Beginners • The Net Ninja: • Modern JavaScript Tutorial #1 - Intro... • ✅ Follow Me: • Twitter: / yesdavidgray • Reddit: / daveoneleven • Medium: / davegray_86804 • #dom #javascript #tutorial
#############################
