This section of the course is going to walk through how we can leverage javascript to work with the dom and the DOM is an acronym for document object model.

Now that you have a high-level understanding for how the dom works and how we're able to treat it like a traditional javascript object. In this guide we're going to extend that knowledge and we're going to see how we can build out our own HTML pages and then perform our own queries on elements and make changes.

In this lesson, we're going to examine the differences between the window and the document object as it relates to development.

So far in this section on the Dom, we've focused on two different query functions in JavaScript.

One of the most popular features of JavaScript is how you can implement dynamic behavior into your applications. This could be something like starting and calling a function whenever something on the page has hovered over or clicked on. The way that that is implemented is through what are called event listeners and that's what this guide is going to be all about.

Because event listeners are one of the more challenging topics in javascript if you've never used them before. In this guide, we're going to walk through a few different ways that we can work with them.

When working with DOM elements in JavaScript a very common task that you are going to need to work through is changing the styles for those DOM elements.

A common piece of behavior that you will most likely need to implement is the ability to toggle elements.

This is going to be a really fun exercise. I got the idea for what we're going to walk through in this guide and also in the next one from a student who's looking to add this to their application.

We're going to have some fun in this guide because in this guide we're going to walk through how we can add hotkeys to a web application

In the last guide, we walked through a pretty cool feature where we're able to build out a full character countdown right here in the browser.

Throughout this section on manipulating the Dom the majority of our time has been spent in building our javascript functionality that would simply show and hide elements on the page and that is perfectly fine in many different circumstances.

In the last guide we walked through how we could build out and create HTML elements in the DOM dynamically just using JavaScript. In this guide we're going to extend that knowledge and we're going to see how we can remove elements.

Build out using only vanilla javascript, the ability to click on each one of these items or any that you want and have that item deleted so have it removed completely from the DOM. So don't just hide it the visibility or anything like that. Have it completely removed from the DOM and then create it.