JavaScript: Enhancing the DOM

with Ray Villalobos
please wait ...
JavaScript: Enhancing the DOM
Video duration: 0s 2h 3m Intermediate


The Document Object Model (DOM) is at the core of every HTML page. In order to develop dynamic HTML pages, a front-end developer needs to understand how JavaScript connects to and controls the DOM, allowing you to create, modify, delete, and edit existing page content. This course focuses on helping you understand the DOM elements, and shows the different ways JavaScript gives you access to them and makes it easier to work with the DOM. Author Ray Villalobos covers navigating the DOM, selecting elements, modifying HTML attributes, editing nodes, and much more.

Topics include:
  • What is the DOM?
  • Choosing and isolating elements
  • Traversing up and down DOM nodes
  • Changing HTML attributes
  • Modifying elements as text
  • Creating and appending nodes
  • Cloning and removing nodes
  • Adding a bubbling event listener
  • Adding and resizing images
  • Handling clicks
Developer Web
HTML JavaScript


(exciting music) - [Voiceover] Hey there, I'm Ray Villalobos and welcome to JavaScript Enhancing The DOM. In this course, I'm going to show you how the Document Object Model is tightly integrated into JavaScript. I'll start by showing you how the developer tools work in Google Chrome and how to test commands with the JavaScript console. Then, you'll learn to select notes by ID, last name, and with the new query selector. I'll show you how to modify regular, restricted, and HTML5 data attributes in DOM elements.

Next, we'll learn to create, append, clone, replace, and remove existing notes. Finally, we'll build a project that utilizes what you've learned by building a pop-up. We'll create an overlay with a centered image, style it via JavaScript, and handle events like clicks, scrolling, and re-sizing the document window. If you're looking to master how you can control elements in your document through JavaScript, then this is the course for you, so, let's get started.

please wait ...