Document Object Model (DOM) - Complete Guide - Part 2 (2026)

We've learnt how to attach event listeners and handlers to different DOM elements, but now we're going to dig deeper and veer away from the pure 'click' event.

As I've mentioned a few times, there are many different types of events.

This section goes further though, we we look at other areas of programming where events are relevant, and also look at where events themselves come from.

Enjoy!

I must take a quick pause here and make it clear that we are dealing with events in the context of the web, but these are not the only types of events we have.

What you learn in this course will help you in other areas of development, such as using Node.js.

This lecture explains why.

Before we go further, lets do a quick example of a click event. This lecture is building the HTML.

This is the final part of the example, where we add our click event listener onto a button and write JavaScript.

A student asked me why the previous example doesn't work when you wrap all of the code within a <form> element. I thought it was such a great question that I decided to write this very quick article.

The most common event you'll come across is the click event. Its also one of the easiest to understand.

But rest assured, this is not the only event type. There are lots of different event types given to us automatically by the DOM. This means we don't have to do extra coding - we can access and listen to them from the get go. Some of these events are focus, printing, mouse, tab, touch, resource, etc.

Because there are so many events, we can't talk about all of them.

However, the next best thing is to narrow down the most common that you'll be working with, which is exactly what I've done.

I've put together this lecture to summarize what I think are the most important / common events you'll encounter.

We don't stop there - but in this section we're also going to look at a few examples along the way.

Your browser has many APIs that are running that give you the ability to access many functions straight out of the box (like the Fetch API for example). One of these APIs is the DOM. 

And the DOM gives us access to Events.

The keydown event is fired when a key is pressed.

Its different to the keypress event.

Remember, the keydown event is fired for all keys, regardless of whether they produce a character value.

We've  discussed this before, but I want you to stop here and remember what events are, where they are from, and that some events have different interfaces so that they can give us extra information.

We've looked at the Mouse Event, and the Keyboard Event.

Its now time to look at the Form Event interface.

The best way to learn is through practical examples - that's why this course if full of awesome examples.

In this lecture, I go over what I want us to build together. Enjoy :)

The starting point is to build our skeleton - that is, the HTML and CSS for our form. After we do this, we can start adding events and listening for them.

I highly encourage you to code alongside me when building this form, but if you really don't want to then I have included the HTML and CSS below.

I want to show you how to find forms. Yes, we can use various DOM access methods to do so (such as getElementById() or getElementsByTagName() for example), but there is an easier way when it comes to forms. We can access our document object, and then access a property called forms on it.

This lecture will also show you the default actions of forms.

You'll be coming across many forms in your front-end web development career. That's why I've specifically taken a few lectures to discuss forms in a little more detail. This lecture looks at some of the most common events you'll listen to on forms, such as the submit event, input event, focus event and copy/paste events.

Touch events are only triggered on touch devices - like smartphones and IPADs. We also have window events that can be quite useful, like when the user scrolls down a page, resizes the screen and other things.

This is going to be a fun section, and it's gonna be super practical.

Try to have fun along the way.

In this lecture I show you what we will be doing together. Its a very simple example. All we're doing is listening for a click event on the image, and when that event fires we want to display some text beneath it.

Not that difficult right? 

Lets now include an <img> tag and reference our lovely cat photo. We then need to write our JavaScript - we need to reference the image, add a 'click' event to it, and then define our handler code.

I want us to move away from a click event in this challenge. Instead, lets start using the Mouse event interface to listen for any movements.

Confused? Don't be. Let me show you what I mean.

In this DOM challenge, I want to execute code only when the users mouse moves. I want to structure our code a little differently in this exercise to. You'll soon begin to realize that there are many ways to skin a cat when it comes to coding.

Continuing on from our previous example, I want us now to include a black dot.

The last part of Challenge 2 is to ensure the black dot follows the users mouse.

Up until this point, we've defined a fixed absolute position for the black dot.

We need to somehow access the MouseEvent object, and look for a property within it that gives us access to the users mouse position when the 'mousemove' event is fired.

Makes sense? 

Don't worry if you are still a little unsure. Lets jump into Visual Studio Code and see how its done.

Given what you've learnt so far, I think you're ready to give this challenge a go without me. I want the user to be able to click on the image, and the mustache needs to be placed where that mouse is clicked.

Whenever you are faced with having to do something based on the position of a users mouse, you will very likely need to access the clientY and clientX properties of the Mouse click event.

I know many of these challenges may be simple. But you need to build your skills upon solid foundations for you to master the DOM. Well done for getting through the challenges.

Stay motivated and see you in the next section.

This section is all about the hierarchy of nodes within the DOM. It can be confusing, but it is very useful to know where all of our methods come from.

This is relatively advanced, but as always I will do my best to break it down into a fun and intuitive way.

Before we jump into prototypes and hierarchies, I want to show you why knowing about these things come in handy.

To illustrate the importance of this section, lets create 2 different types of objects - a JavaScript object and a DOM object. Remember, these objects are not the same thing. The one is from JavaScript, and the other is provided to you by the browser.

If you, for example, create a DOM object, and then try and access JavaScript methods on it, you may get errors. And sometimes this will cause you hours of frustration. Therefore, knowing where objects come from and what you're working with can really speed up your coding time and streamline your process.

I was surprised to see how little information there was on the web about these topics. Its very likely that the reason its so difficult is that we're dealing with advanced topics of host vs native objects. But don't worry, that's what I'm here for.

Although I don't want to dive into detail about the shadow DOM in this course, I want you to be aware that it exists.

Host Objects are objects supplied by a certain environment (like your browser for example, or Node.js). They are not always the same because each environment differs.

Native Objects are built-in objects provided by JavaScript. Native objects are also Global Objects because they can be accessed natively from your code straight out of the box.

In this lecture, I also want us to discuss the Window object. Can you guess whether the Window object is a host or native object? Who gives us the window object? 

We know that the DOM has a bunch of objects and nodes that are given to us. And as the previous lecture showed, these node objects are different to JavaScript objects.

But what's very interesting is that objects inherit properties and methods and from other objects ... and this can sometimes lead to weird results.

I want to try and find this createElement() together.

In doing so, I want to illustrate what inheritance means in a practical way.

We've seen that the full set of properties and methods of a given node comes from a concept known as inheritance. And interestingly, the root object for element nodes is the EventTarget node, which gives support for events like the addEventListener() method and others.

Just remember though, that each different object type (element, text, comment etc.) may follow its own different hierarchy.

The practice of DOM Extension refers to adding custom methods and properties to DOM objects.

Sounds like a great idea right? Well, lets discuss this in more detail in the next lecture. In this lecture, lets just wrap our heads around what DOM Extensions are.

We are going to add our own DOM Extensions, and see some of the problems that can occur along the way.

I want to discuss the problems of DOM extensions in more detail.

Firstly, we have to choose the right prototype to attach our custom event to.

Secondly, there are no rules on host objects, meaning it can get pretty messy to change these objects.

And thirdly, the biggest problem is collision risks - overriding some other method that the host object already has.

DOM extensions are often designed for particular use cases. But they should be used with caution.

This section is very important, and getting pretty advanced. We're going to be talking about 3 important topics: Event Target, Event Capturing and Event Bubbling.

I want to talk about event bubbling - by this I mean the flow of each even through the DOM. Remember, an event is not an isolated event - it has many effects on the DOM.

This lectures covers what happens when an event is fired in the DOM. You'll find out that it first starts at the root of your page, and works it way down to the item that fired the event. It doesn't stop here ... the event then travels back up the DOM tree, all the way home to its root object.

We know that events travel through the DOM. But the question is in which direction (from the html to the target element, OR from the target element to the HTML)?

Well, this is a quick article that explains the history of why there is both capturing and bubbling phases.

As developers, we can choose where to listen for our event - i.e. during the capturing phase, bubbling phase or BOTH.

Lets look at an example of listening to a 'click' event during both the capturing and bubbling phase. We will do this by creating a button and attaching a click event to it via the addEventListener() method.

Lets display the entire bubbling and capturing process by using the for...of loop.

Why do we need to know about capturing vs bubbling? Strictly speaking, you won't really need to know or distinguish between them in most cases. However, understanding bubbling will allow you to utilize something very useful as a programmer known as EVENT DELEGATION.

Sometimes we want to end our event from running through our DOM - we can do this by using the stopPropagation() method.

I now want to grab our event on the button, and stop it from flowing through the DOM.

One of the major benefits of event bubbling is that it gives us access to the practice of Event Delegation. This section is all about event delegation.

This is an introduction to the box challenge, where we will practically apply a DOM technique known as Event Delegation.

Before we start using event delegation, we have to code up our example. I encourage you to code alongside me, but if you don't want to then thats ok too - I have attached the html and css files below.

Lets now use event delegation to listen for a click event. We will have to access the event object to find which item (or box) triggered the click event. Once we know this, we can effect its class and style it differently.

At the end of this lecture you'll understand how event delegation works, and how you can use the classList API to add and remove classes dynamically.

Remember, the classList API provides methods and properties to manage class names of DOM elements. Using it, we can perform operations such as adding and removing classes, or checking if a given class is present on an element.

Its time to finish off our example.

It can be confusing to understand how we have just achieved the above. Lets recap what we've learnt. I am going to ignore event bubbling and a bunch of other code - all I want us to do is concentrate on the high level understanding of what we've just done.

An improvement on our previous example by adding random color generation to each click

Lets jump into another challenge, where we look at deleting items dynamically from the DOM.

As always, I highly encourage you to code alongside me. But if you've already mastered HTML and CSS, then I totally understand if you want to skip this - I have therefore provided the .html and .css files below.

Lets finish this project off by adding event listeners and writing some JavaScript.

A student of mine was confused when to use parentNode or parentElement. Truth be told, it doesn't really matter ... most of the time. This article explains in a little bit more detail.

This challenge one is a little tricky, but entirely possible for you to tackle on your own. We're wanting to utilize event delegation to hide and show list items every time the user clicks on an item.

If you don't want to code with me, then here's the index.html file.

Lets finish off this challenge by adding a Mouse click event listener, finding the target element, and showing or hiding it.

A student of mine asked me a great question - why did I have to check whether tagName returned "LI"? 

In other words, why did I use uppercase?

I'm glad you stuck with me for so long. WELL DONE.

I want this final section to be incredibly fun - I want you to build an entire shopping list site, but with all the bells and whistles. The user should be able to add, remove, show/hide and search for items in their list.

So what are you waiting for? Lets apply what you've learnt in this entire course and build a simple but interactive site.

Up until this point, we've only seen snippets of what we can do with the DOM. However, its now time to combine what we've learnt in both my DOM courses and now build a practical page.

The starting point is to build the HTML together.

We have built the skeleton, but now lets add some CSS styles to make our front-end stand out.

This is the final CSS to finish off the form and the list sections of our HTML.

Sometimes we stand too close to the wall we can't see the painting. This is why its good to step back and review what we've done and where we want to be.

This lecture goes over the old way to delete items from the DOM. It involves attaching an event listener (a click event) to each and every button on our page.

I want you to learn this because you'll see many developers do it. However, in the next lecture we'll improve on this by using event delegation.

Now lets remove items from the DOM, but like a pro! 

Remember, in the previous lecture we effectively attached the click event listener to each button.

But now, lets use the concept of event delegation and only attach a click event listener to one item in our DOM.

You'll encounter many forms in your development career. That's why I want to step back and discuss forms in a little detail before moving on.

When a submit event is fired, the default behavior for a form is to refresh the entire page. However, there is a way we can prevent this default behavior.

We will use the createElement() method to create list items every time the user clicks on the Add button. But as you'll see, this does nothing to our styling. We therefore also need to attach a class to each newly created list item. There are a few ways we can add classes - we can use the className property ... but there's a better way. We now have access to the classList API.

Now lets deal with hiding and unhiding our entire grocery list. It may seem like a simple example (and it is), but what great is that we are learning to listen for the 'change' event. You'll begin to see how easy it is to listen for different types of events.

I want us to look at what events we've listened to so far, and how we've dealt with them. Its quite interesting that we've already dealt with click, submit and change events.

Forms are so important, because you'll be dealing with them often. I want to discuss a few different ways we can access these forms. I want to then extract the users value from a form and console it out.

toLowerCase() is given to us by JavaScript (it is not a DOM method). Often we want to make sure the data we're dealing with is case insensitive. And what better way to deal with the problem than using the toLowerCase() method.

We need to convert all our user input data into lower case. But after we've done that, we're not done. We then need to compare this text to each item in our grocery list. So we need a way to grab each <li> tag (remember, each <li> tag contains a grocery item). But its easy enough to grab the <li> tags - we can use getElementsByTagName for example ... but how do we loop through each item in this HTMLCollection? 

Often we want to loop through an array-like object - in other words, an object that is not a real array, but close to it. Unfortunately the forEach method is available on Arrays, but not other object types. This is why it sometimes becomes very important to convert our object into an Array.

Understand the Array.from() method and how it works.

Once we've converted our object into an Array, we can access the forEach() method and use that to loop through each <li> tag within our HTMLCollection.

It may sound confusing right now, but after this lecture it will make complete sense.

Relax, and breath. 

Remember, we have the users search item. We have put all of our grocery items into a variable. But now we need to loop through each item in this list to compare its text to the users search input box.

Have fun, and see you in the lecture.

We keep running into JavaScript functions, but its important I stop and explain what they mean. The indexOf() method allows you to search for a value inside of an array or string - pretty useful right.

As mentioned, we can use indexOf() with Arrays. But now its time to look at practical examples and see it in action.

JavaScript's indexOf() method can also be used on String data types. Lets see a few examples.

We've come a long way, and now its time to finish what we've started - completing the entire search functionality.

Now we're going a step further and seeing where we can improve our site. You'll notice that whenever a user adds an item to their grocery list, that the input text field does not clear. In other words, the users text stays there.

Annoying right? 

So then, why don't we clear the value of the input box to null whenever the Add button is clicked.

Another addition I want you to do is to add tabs to the bottom of the page. Remember, we are using pure DOM and JavaScript to do this. No other third party libraries or packages.

The first step is for us to build the HTML for the tabs, and style them in a separate CSS file.

The data-* attribute is used to store custom data.

Anything you want.

This custom data can then be used in by JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

Pretty useful right.

Remember, the classList API provides methods and properties to manage class names of DOM elements. We've done a few examples already of using this API to add, remove and toggle classes.

The final step is to show the appropriate panel - i.e. the one corresponding to the correct heading. We do this by using the data-attribute we added in our HTML.

We have included a joke on our page, but lets hide this joke from the user and only display it when the user clicks on a button.

You're done with the course - well done. Super impressed and I hope you've learnt valuable things you can take with you going forward.

But what should you learn next? Find out in this quick video.