- 5.5 hours on-demand video
- 24 articles
- 4 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- ***Download lectures (for offline viewing)
- What exactly the Document Object Model is
- Why the Document Object Model is so important for web developers
- Learn how your website can come alive with actions, like zitsy changes on clicks, colour wheels, dropdowns, response on form submissions and much more
- Have fun mastering front-end website development
- Build awesome dynamic front-end applications
- Practical - build awesome dynamic front-end applications with me
- How your browser creates a DOM tree
- Become a pro at creating elements in the DOM
- Parent, Sibling and Children DOM relationships
- The different types of Nodes
- The difference between an HTMLCollection and NodeLists
- How you can find the DOM
- How you can access elements in the DOM
- Master the skill of traversing (walking) up and down the DOM
- How to remove items from the DOM
- Cloning elements in the DOM
- From beginner to expert (advanced +)
- You will emerge an expert
- Gives you depth of knowledge to boost your ability and confidence
- I am here to support you, step-by-step
- Parent, Sibling and Children DOM relationships
Welcome to this course! I hope you enjoy it as much as myself. It has taken me several months of hard grueling work to put it together. I hope you appreciate this and take a lot from it.
The DOM is crucial for you to master if you want to take your web development career seriously. It is the building block of every website you visit. Although the DOM specifically refers to front end development, you can still use the concepts and methods learned in your backend development.
Before we begin, I want to address the 2 most common questions students ask me about the DOM when they start out -
Is the DOM a programming language?
Where does the DOM come from?
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.
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.
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.
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).
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.
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.
Don't be. Lets jump into an example and see what this means.
The closest approximation to the DOM that we have access to is the elements inspector in DevTools.
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.
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.
Well done for completing the first section. But hold on for the ride, because we're only just getting started!
When I was first learning to code, I heard the "DOM" word all the time but I never knew exactly what it meant. Was it the HTML that I write my code in? Was it what was displayed in the browser? I never really understood. And it took me a while to figure out exactly what it is.
In simple terms, the DOM is a representation of your HTML to the browser. It allows you to manipulate the page (more on manipulation in later sections).
So, with this knowledge in mind, try your hand at these few questions.
See 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.
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.
We've come a long way. Well done!
Now its time to look at how we can 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.
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.
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.
We've learnt how to access the DOM with these methods:
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.
You may feel a little overwhelmed, but don't. You're doing so well.
As my mother always used to tell me, "slowly slowly catch a monkey". Things don't happen overnight.
As with most things in life, there is more than one way to skin a cat. That's why we have a handful of useful methods we can use to get access to items in our DOM. We looked at the 5 most common methods. It was fun.
Lets see how closely you've been paying attention by jumping into this fun quiz.
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.
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.
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.
We've seen that there are 5 main access methods, being:
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'.
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
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.
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.
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.
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.
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!
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 mostly 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!
If you though the previous section was good, hold onto your horses because this section is going to BLLLLLOW your mind. We are now getting into full DOM manipulation - that is, creating, removing and cloning elements in your DOM. This is the meat of front-end website development. Master this, and you'll be well on your way to becoming a full-stack web developer.
This is a very advanced topic on web development - a topic not many developers can even answer. We know that the keyword in the DOM is the document itself. It is this document that we use to interact with the DOM. But, as we have seen, this document inherits from the Document node. But what does this mean? Watch this lecture to find out.
Lets use the most well-known method available to use to dynamically add elements to our application. Take it in, and enjoy!
As we've seen, creating the element is the easy part.
But without doing more, our newly created element will float round in space, all lost. In fact, if you want to get technical, memory space has been allocated for our newly created element, but we haven't attached it to anything. That's why we are unable to see it.
So, in order to finish things off, we need to attach our newly created element to a parent.
Just when you think we were done .... !!!!
But don't worry, you're almost there. We've created an element, and we've added it to the DOM. But up until this point, we haven't populated it with anything. It's like we've brought a plate to a diner at a restaurant, with no food on the plate!
We have a few options available to us to add content to a newly created element, but the one I want to look at is the textContent property.
We've seen the use of createElement, but in order to attach it to a parent we can append it to the parent. The appendChild() method adds a node to the end of the list of children of a specified parent node.
This lectures takes a deeper look into the appendChild method, and how it works.
The removeChild() method in the DOM is used to remove a specified child node of the given element. In order for you to use this method, you have to call the method on the parent of the element you're wanting to remove.
And lastly, this method returns the removed node as a node object or null if the node doesn't exist.
Being able to clone elements is very useful as a developer. It allows us to create a deep copy (if this is what you want, of course) of the selected DOM element including attributes and child elements. In other words, it creates a duplicate of the node on which this method was called. Makes sense.
The DOM cloneNode() method is used to copy or replicate a node on which the cloneNode() method is called. For example, a list item can be copied from one list to another using this method. It takes 1 argument, which is a Boolean value. If we leave it blank, then true is set by default, which means that by default both the element and all of its children will be cloned. Make sense right?
It is always a good thing to test yourself - it not only solidifies what you've learnt, but also encourages you to keep going. You've come such a long way already - you know how the DOM works, where to find it, how to access it, and how to manipulate it. Its now time to put these skills to the test with this simple but fun example.
You've come so far already. Well done. Seriously.
As we've seen, it's very common for interactive apps to dynamically create HTML elements and add them to the DOM. The way we can create elements is by using the createElement method. And by now, you know that the way createElement works is pretty simple.
And of course, we didn't stop there. We've also looked at removing elements, and then we got really creative by cloning them!
Equipped with this knowledge, its the perfect time to try your hand at these fun questions.
- Desire to become a full stack web developer
- A need to take your website to the next level
- Desire to create dynamic, interesting and acclaimed websites
- Desire to have unique features and actions to engage visitors to your website
- Desire to KNOW the full process of how your webpage is represented by your browser behind the scenes
- Desire to KNOW how user interaction (like clicking a button, or submitting a form) can cause jazzy things to happen on your page (like displaying a message, or changing a button color, etc.)
- A computer is required as you need to code alongside me to learn effectively
Let me share my new front-end web development secrets with you
Understanding the DOM will equip you to become an awesome front-end programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master front-end development and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering an interactive web experience is challenging.
What this course covers?
This course is Course 1 of 2
This course is the first course of a 2-part program. The reason I have done this is that Course 1 provides everything you need to start coding dynamic sites by yourself. It gives you the sound fundamentals and practicals regarding the DOM. It can be taken alone (you don’t have to do Course 2) to achieve your goals. You will emerge from Course 1 with a basic understanding and practical experience. It will take you to the point where you will understand what the DOM is, why we need it, how to access it, where to find it and how to manipulate it. This is awesome knowledge. Course 2 provides a whole different world of fun with amazing practical examples that will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end web development.
In this course you’ll learn about front-end Web Development, by mastering the Document Object Model.
Why do you need to know about the DOM?
So, you know some HTML, you’ve created your first tags, learned about CSS, made awesome forms, star-gazing buttons, responsive pages and have started to create dynamic and interesting pages.
But now you want to do more: “How can I add animation (and life) to my page? I wish I could give an error message to a user who incorrectly submits a form!”
And this is where the DOM comes into the picture. and where this course(s) provide you with an opportunity to grow in your skills.
To cut a long story short, we use the DOM to allow users to interact with our app. It doesn’t have to be annoying interaction either – simple things like giving the user the ability to ADD/EDIT/DELETE/UPDATE contents on your page, for example, requires interaction with the DOM.
Knowledge of the DOM is incredibly useful for understanding how your webpage can be improved.
By the end of this course, you'll be able to “speak” DOM by gaining an understanding of where you can find it, how you can access it, and more importantly, how you can manipulate it. We dig deeper in every lecture, learning about things like Nodes, the difference between HTTPCollections vs NodeLists, and a whole bunch more! This course has many bonus lectures which extend your knowledge base and test your skills.
*** The most important Web Development course on Udemy ***
Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how your browser represents your HTML code and works behind the scenes. If you’re wanting to become a full stack developer, you need to know how to deal with the DOM. You need to know how to access it, how to manipulate it, and how to dynamically interact with it.
I want you to become a successful front-end programming Grandmaster.
I want you to be able to apply what your learn in this course to your webpage.
This course is perfect for you.
Hi there, my name is Clyde and together we’re going to learn how successful web developers can create whizbang websites that are dynamic and engaging!
The root to understanding how to be a professional front-end web developer is understanding the Document Object Model and applying it to practical situations. We're going to practice and learn and emerge confident to tackle any challenges modern programs and websites throw at us.
After completing a few university degrees, and post graduate studies, I developed a fascination for web design and software languages. For several years I have immersed myself in this. I spent a fair bit on top courses and went on to apply the knowledge practically. I recognized gaps in some of the courses I’ve taken and hence my course teaches what I wish I was taught. My intention is to share the knowledge with you in an easy to follow manner, so that we can benefit together. You benefit form learning, and I from sharing in your success.
This course is for beginners and for intermediates.
A unique view
Understanding the DOM is a vast topic. To get you up to speed, I’ve spent months thinking about where to focus content and how to deliver it to you in the best possible way.
You will learn "why" things work and not just "how". Understanding the fundamentals of the DOM is important as it will give you infinite possibilities. Armed with this knowledge, you’ll be able to create applications that update the data of the page without needing a refresh. You will be able to create apps that are customizable by the user. You can even allow the user to drag, move, and delete elements. Can you begin to see how important the DOM is?
How is this course different?
There are lots of great courses that focus on web development. Pity they never get into the detail about how the Document Object Model works behind the scenes – a skill that every full-stack developer needs to master.
In this course, I focus on true web development in the front end. This includes understanding what nodes are, looking at the Document node (this is different from the document object by the way), understanding the DOM tree structure, what the different types of nodes there are, and how you can use the DOM to access elements on your page and manipulate them.
Practice makes perfect
Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this course.
I love practical examples, which is why we build simple pages and analyze the DOM together.
Is this course for you?
It doesn't matter where you are in your web development journey. It's suitable for all levels.
Still unsure? If you fit in any of these categories then this course is perfect for you:
Student #2: You want to know how successful developers build dynamic websites that engage with the user and put them ahead of the competition.
Student #3: You want to gain a solid understanding of front-end web development.
Student #5: You kinda know what the Document Object Model is, but have little knowledge about how it works behind the scenes, and how to practically implement it in applications.
Student #6: You have taken other courses in web development but just don’t feel like you’ve grasped front-end development.
WHY START NOW?
Right this second, your competitors are learning how to become better web developers.
Web development is a blazing hot topic at the moment. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.
Lets get started!
What do you get?
Lifetime access to all tutorial videos. No fees or monthly subscriptions.
Quizzes and challenges to help you learn.
I’ve allowed you to download all of my lectures for offline viewing.
Let's get excited about becoming a professional web developer, and to be able to confidently apply it to your own websites.
See you in the lectures.
- Anyone who has completed my Web Developments Secrets course
- NO: This course is NOT only for beginners. It is a complete beginner to advanced master course that is suitable for intermediates who know the basics and have an idea the DOM, but want to dig deeper to know its inner workings. Experienced students sometimes prefer to skip a section that they are very familiar with
- YES: This course is for someone wanting to be a professional, to be expert and confident in the entire front-end development process
- Those who want to learn modern coding without third party libraries and frameworks
- Those interested in building their own frameworks, or being better able to learn from the source code of other well-known frameworks and libraries
- Those who have some knowledge of web development, but little knowledge about how it works behind the scenes, and how to practically implement best practices in their websites