Document Object Model (DOM) - Complete Guide - Part 1 (2025)

Are you ready to learn amazing things about the DOM

The name "Document Object Model" was chosen because it is ... surprise surprise ... an "object model". This means that our document is modeled using objects, and the model encompasses not only the structure of a document, but also the behavior of a document and the objects of which it is composed.

In other words, the DOM does not represent an abstract data structure, but rather, real live objects each of which have functions and their own unique identity.

To understand the DOM, lets build a simple page. This will help us to examine our code in more detail and figure out what the DOM is all about.

There is hierarchy everywhere - a CEO of a company, then managers of different divisions, and finally employees. In a family, there's the grandparents, the parents, and the children. Just like a corporate or family structure, there is also hierarchy when it comes to the DOM. Its important for us to know this hierarchy - it tells us where all the methods and functions we get are coming from.

Enjoy!

The console is given to us by the browser, and allows you to run and execute JS.

But it does more than that.

It also allows you to inspect objects and their properties. But you'll notice that some properties are bright purple, and others are faded. Why is that? 

We've looked at the hierarchy of the DOM.

But lets take a further step back.

The browser object model (BOM) is a hierarchy of all the browser objects that are used to manipulate methods and properties associated with the Web browser itself.

Objects that make up the BOM include the window object, navigator object, screen object, history, location object, and the document object.

It can be quite confusing when starting out, what the BOM and DOM are. Here are my 2 cents worth.

Most people, when they're starting out, think that the DOM was designed for JavaScript.

As we will see, this is not the case. The DOM was made to be independent of any programming language. Sometimes this can cause weird effects (which we'll see later on in this course).

In fact, we don't have to use JavaScript to access the DOM. We can use, for example, Python.

Up until this point we have a very high level understanding of the DOM. I want to now dig deeper. But instead of showing you what the DOM is, I want us to look at what is NOT the DOM. I know, its a rather round-about way of looking at it, but I believe it is the best way.

Lets get down to business.

The DOM is not the same as your HTML code.

We've seen that the DOM is not the same as our HTML code, so you may think the DOM is what we see in the browser window when page loads.

Nope.

The DOM is not what you see in the browser.

So Clyde, the DOM is not our HTML, and its not what we see in the browser window. What then, is the DOM? 

You may think its what we see in the DevTools.

You are 90% correct, but for reason's we'll discuss now, you'll see that its not 100% the same.

One reason why the elements inspector in DevTools is not the same as the DOM, is due to Pseudo Elements.

As I am sure you know, Cascading Style Sheets (CSS) is an independent language used to describe the presentation of web applications. This involves concepts like colors, fonts, and the full control of the layout of HTML elements. A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected HTML element.

Confused? 

Don't be. Lets jump into an example and see what this means.

A quick summary of what the DOM is not.

The closest approximation to the DOM that we have access to is the elements inspector in DevTools.

JavaScript is a programming language that the browser reads and does stuff with.

But the DOM is where that stuff happens. Many people get confused between JavaScript and the DOM, thinking that many things are a "JavaScript Thing" when in fact it is purely the "DOM API" doing that thing.

I hope you're starting to get more familiar with the DOM and starting to understand it. Don't worry if its still a bit fuzzy right now - by the end of the course you'll become very familiar with the DOM and what it is.

Keep going.

Great, we know what the DOM is, but this lecture now discusses why its important for us to know about the DOM and what we can do with it.

If you're anything like me, you are getting tired with theory.

So, lets jump into our text editor and look at how we can manipulate the DOM.

You've just wrapped up the first section of our course, and that's a fantastic achievement!

But don’t get too comfortable—there’s so much more to explore!

When I first started my coding journey, the term "DOM" was everywhere, but I struggled to grasp its true meaning. Was it just the HTML I was writing? Was it the content displayed in the browser? It took me some time to fully understand its significance.

What is the DOM?

In simple terms, the Document Object Model (DOM) is a structured representation of your HTML in the browser. It acts as a bridge, allowing you to manipulate and interact with web pages dynamically. (Don’t worry, we’ll dive deeper into manipulation in the upcoming sections!)

Ready for the Quiz?

With this foundational knowledge, it's time to test your understanding.

I'm looking forward to seeing you in the next section!

We've seen that the DOM defines how the contents of a page are modelled in the browser.

The DOM API, on the other hand, is how the browser provides access to this content.

For instance, calling document.getElementById(id) is the method defined in the DOM API to get an element with the given ID. There are many more, but this is a common example.

The DOM is used by most programming languages to make web pages dynamic.

Take a step back.

If you have a technical job, you may use words and jargon at work that is totally different to what you'll use when having a barbecue with friends over the weekend.

In both instances, however, you are speaking English. It just so happens your vocabulary changes depending on those around you and the context.

Its the same with JavaScript.

JavaScript lives in different environments - including frontend (the browser), backend (Node.js), and working with data (MongoDB).

Many developers get confused between JS and external APIs. Let me explain.

Lets look at an example, by using the setTimeout() function.

I'll use this example to explain the differences between the DOM and JavaScript.

We've built our example. Now its time to dive into what makes JavaScript from the DOM.

Because the DOM was not made purely for JavaScript, it can cause weird results.

Sometimes what you think is an array (because it looks and feel like an array) is not an array as we would expect. Lets look at this in more detail.

Congratulations!

You're making great progress, and I'm excited to see how much you've learned so far.

In this section, we delved into the powerful DOM API and explored how JavaScript interacts with the DOM to bring web pages to life. We discovered that while JavaScript is commonly used to manipulate the DOM, it's not the only language capable of doing so.

Putting Theory into Practice

To solidify your understanding, we put our knowledge to the test by building a simple setTimeout function. This exercise demonstrated how JavaScript can be used in conjunction with the DOM to interact with a web page.

Ready for the Quiz?

Now that you've grasped some fundamental key concepts, it's time to put your skills to the test.

Keep up the excellent work, and I'll see you in the next section.

By mastering DOM access, you can create dynamic forms, update content in real-time, and optimize page performance. This knowledge is essential for building robust and responsive web applications that provide a superior user experience.

We've come a long way. Well done!

We've seen what the DOM is, and how it differs from JavaScript.

Now its time to look at how we can access the DOM.

Accessing and manipulating the DOM is fundamental to building funky websites.

A quick infographic explaining how you access the DOM.

Before we start diving into all the access methods, you have to understand your HTML. This course is not about HTML, but this lecture is a quick recap of the jargon we need to know in order to understand the methods later in this section.

This is a great lecture to get involved and start coding alongside me. We are building our page that we'll use for the remainder of this section.

If you really don't want to code this, then no stress - you can download the material which I'll make available for you.

I sometimes get asked how I can type so quickly in Visual Studio Code. Truth is, I use the help of extensions.

Confused? Don't be ...

Perhaps the most well known and common method, the getElementById() returns an element node with a specific ID.

Although this is a very simple method and performance efficient, there are also some downsides to using this method to access items in the DOM.

Watch this lecture to find out why!

getElementsByClassName() returns an HTMLCollection. For now, you don't have to stress about what exactly this means. Just know that its an alternative method to access items in our DOM. 

The cool thing with this method is that you are able to collect a whole bunch of items, rather than just one element with a specific ID.

I want to put your knowledge to the test now.

Don't worry, its purely for your benefit and you should have a lot of fun doing it.

I would strongly encourage you to build this page with me. The more you code, the better you'll become.

However, if you are stubborn and really don't want to, then I have provided the blueprint code (without the solution) for you to download.

Lets now include all our class names to our HTML, and finish off the functions.

You see, its not that difficult is it? 

Hope you had tons of fun.

This is closely related to getElementsByClassName, but getting 'tags' is even more broad. I say this because now we don't even have to have class names in our HTML - we can purely find an entire collection of HTML elements by their tag name.

Along came a spider .... oops, wrong song.

Along came the Selectors API in 2003, which gave us access to the querySelector and querySelectorAll methods.

The method querySelectorAll() returns a NodeList, which acts like an array. That list is "static", which means that the list won't update even if new matching elements are added to the page. Worried? Don't be, we'll cover Nodes and live vs static lists in the bonus section next. For now, just understand that there are now querySelectors that we have access to.

Lets jump into it.

Actions speak louder than words, so this lecture takes a look at how we can use the querySelector to access items in our DOM.

We've learnt how to access the DOM with these methods:

• document.getElementById

• document.getElementsByClassName

• document.getElementsByTagName

• document.querySelector

• document.querySelectorAll

With the query selectors, we use a CSS selector to define what elements to grab. This is why its important to understand our HTML and CSS to fully appreciate how these methods work.

Great Job on Completing the Third Section!

I know it can feel a bit overwhelming at times—but don’t worry! You’re making fantastic strides in your learning journey. As my mother used to say, "Slowly, slowly catch a monkey." Remember, mastery takes time, and progress is made step by step.

What We Covered

In this section, we explored methods of accessing the DOM and its elements. These skills are invaluable and will serve you well in your career and beyond, so keep pushing forward!

Multiple Ways to Access the DOM

There are many effective methods to access items in the DOM. We examined the 5 most common methods, and I hope you found the process enjoyable and enlightening.

Ready for the Quiz?

It’s time to see how well you’ve been absorbing the material.

Enjoy the challenge, and I look forward to seeing you in the next section!

For any serious web developer, mastering the Document Object Model (DOM) is paramount as it forms the backbone of dynamic web development.

Surprisingly, many developers overlook the significance of understanding the DOM, missing out on its power to manipulate web content seamlessly.

This test serves as a fun opportunity to reinforce your knowledge of the DOM, ensuring you harness its capabilities effectively. So, dive in, embrace the challenge, and have fun exploring the intricacies of the DOM!

In a few of the previous sections, I have mentioned the word 'nodes'. Cool word. But it also has very practical implications for us, which is why I wanted to dedicated an entire bonus section on Nodes.

The simple answer to what is a node is, is that its pretty much everything. I know, kinda not that helpful right? 

So, each <p> tag, every <div> tag, even the text inside each tag is a node. Some are element nodes (such as the <p> and <div>) and some are text nodes. Some nodes are comments. The list goes on ...

But not everything is a node, such as attributes.

What exactly is a node?

Armed with the knowledge of what a node is, lets look at our code in more detail and practically see how nodes work.

Its time to jump back into coding again (YAY).

Before we start coding different types of nodes (which is coming up, I promise), I want us first to access the console. I want us to access the <head> element and see the nodes that are contained within it.

Enjoy!

Once again, lets turn to our trusted old friend - Visual Studio Code.

I would like to expand on our existing code and include a few different types of nodes.

This will naturally lead onto the next lecture where we discuss the different node types in more detail.

I wish coding was super simple ... it would make our lives a lot easier. But then again, we would become uncompetitive ... so maybe it is a good thing that coding is complicated.

I digress.

My point is that there is not just one type of node. There are different nodes, and this is important to us because each node has different methods and properties attached to it.

But you already know this.

Lets look

I understand this may be jumping the gun, but in order to fully appreciate nodes, you need to understand their relationship to each other. And just like a family tree, where you have grandparents, parents, and children, you similarly have a tree when it comes to nodes.

At this point you know there are a handful of node types (at the time of writing this, there are 8 node types), but how do we go about identifying what type of node we're dealing with at any given time? 

We've used nodeName to access the name of the node type we're dealing with. But we also have tagName. Are they the same thing? Short answer is no, but this lecture will go into detail as to why they are different.

We've seen that there are 5 main access methods, being: 

1. getElementById()

2. getElementsByClassName()

3. getElementsByTagName()

4. querySelector()

5. querySelectorAll()

And remember, each of these methods returns a special type of collection to us. Some return an element object, others an HTMLCollection, and others a NodeList.

An element object is pretty obvious, so in this lecture I want to look at the differences between an HTMLCollection and a NodeList.

I could have stopped at the previous lecture. That is, an HTMLCollection is a live collection, and a NodeList is a static one.

But if you're anything like me, this is just not good enough.

I need to see the comparison in a practical example.

Well my dear students, what are you waiting for. Lets get crackin'.

Let's take a step back.

You can think of a "node" as a "knot" ...  picture a fisherman's net as a bunch of holes tied together with string. Each knot (hint: node) is where the string is knotted. In case you were wondering (which you probably weren't), the term 'node' originates from graph theory in mathematics ... but getting into graph theory will be sure to break my boredom gauge so lets not go there.

Back to the DOM now, we can see that a 'node' is nothing more than an item (a knot) in the hierarchic structure, where sections contain other sections that contain other sections and so on. These parts of the document - these sections - are represented by nodes in the tree. So we can say that pretty much everything in the DOM is a node - the <p> tag, the <div> tag, your comments and even that awesome block of text you write. 

Grab a coffee, sit back and have a go at these fun questions.

I'm super excited for this section - because now you are advancing and starting to understand what the DOM is.

Its time for us to learn how to not only access a specific item in the DOM (based on a class name for example), but also how to walk through the DOM.

Grab a coffee and get ready, because this section is going to be EPIC.

See you soon

A good JavaScript developer needs to know how to traverse the DOM—it’s the act of selecting an element from another element.

Traversing just means "moving through". It means we can find (or select) HTML elements based on their relation to other elements. In other words, we can start with one selection and move through that selection until you reach the elements you desire.

Pretty cool right.

Lets jump into it.

I always like to look at practical examples, which is why I want us to build a page that we will use throughout this entire section.

Sometimes, we don't know where we want to go. 

Yes, we have various access methods available to us, like getElementById(), and query selectors, but sometimes we don't quite know what we're looking for. We just want to get in the car and drive...and hope we find what we are looking for.

When it comes to navigating the DOM, we'll find ourselves in this position all the time.

That's where the various built-in properties the DOM provides for will help us out, and we are going to look at those properties in this section.

Before we can find elements and do funky things with them, we need to first get them - i.e. we need to know where they are.

The easiest way to tackle this topic is to just start form the top and work our way down. And it all starts with the king of the browser ... the window object. As you now know, the DOM is made up of the window, document, and html elements.

Lets have look at these objects.

To master the DOM, you need to understand that all of our elements in the DOM have at least one combination of parents, siblings, and children to rely on.

But please don't get intimidated or worry, it works very similarly to your own family dynamics!

Don't get intimidated by all the new terminology you're learning.

Remember, a parent element is just an element that contains other elements.

This lecture takes a deep look into the parent node - and we also look at a practical example of its use.

Enjoy!

A sibling element is an element that has the same direct parent as other elements. Think about normal family dynamics - a sibling of yours shares the same parent. Its exactly the same with the DOM family.

The hardest part of traversing the DOM is understanding how children work. In this lecture we're going to talk about firstChild, lastChild and children.

Don't let all the detail scare or intimidate you. A 'child' element is just an element ONE level below its parent. It makes sense right? 

Depending on your code setup, you may want to access or manipulate a DOM element that is in a certain location. That's why we have different methods such as accessing the firstChild, lastChild and children methods.

Don't worry if you don't quite understand. We'll see this in action.

We know the theory, but now its time to put your website development skills to the test. Here we look at some of the child methods in action.

The DOM API exposes us to a method called children. 

The children property returns a collection child elements. And it gives us this collection as an HTMLCollection object. The elements in the collection are sorted as they appear in the source code and can be accessed by index numbers.

The childNodes property is a property of Node and is used to return a Nodelist of child nodes. Nodelist items are objects, not strings and they can be accessed using index numbers. Don't get fooled - the first childNode starts at index 0. This is true for most programming languages.

The children is a property of element which returns the child elements of an element as an HTMLCollection object.

At this stage in the course you already know that there are different types of nodes within our DOM. Its now time to put your knowledge to the test.

Grab a coffee, and enjoy!

Let us now go through the answer, by coding together.

Getting this stuff right is very important - it will enhance your web development skills and allow you to master front-end web development.

Hope you're learning a lot and enjoying this course so far.

Keep going. Stay motivated.

As you will recall, sibling elements are elements that share the same parent. Just like with parents and children, there are a few methods / properties that are given to us by the DOM that we can use to work with siblings.

Lets look at a few siblings methods in action. Practice makes perfect.

Well done. You're well on your way to mastering front-end web development. Seriously. I'm super impressed.

This entire section has covered how we can traverse (move around) the DOM. Its a crucial skill to have as a developer and will only assist you in getting ahead.

I hope you've had as much fun learning, as I have had putting it together.

See you in the next section!

Hip hip hooray!

Traversing the DOM is important. You may not appreciate how important just yet ... but you will. Remember, each section builds on from each other. In future sections, we will be combining the access methods we've already learnt (remember, like getting elements by tag name, class name, ID and query selectors), with traversing the DOM so we can get around.

As programmers, we often use a variety of methods to get a job done!

To remind you, traversing the DOM allows us to walk around our DOM and access elements. This is important because it means we can eventually do more awesome things like changing elements, adding elements and removing them.

With that said, it's time for you to put your knowledge to the test with these fun questions.

Have fun, and smile :)

See you in the next section!