*NEW* DOM 2020 Build Dynamic Websites with JavaScript Part 1
4.9 (123 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
697 students enrolled

*NEW* DOM 2020 Build Dynamic Websites with JavaScript Part 1

Understand DOM (Document Object Model). Crucial for front end web development. Novice to Pro in easy steps.Course 1 of 2
Bestseller
4.9 (123 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
697 students enrolled
Created by Clyde Matthew
Last updated 5/2020
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 24 articles
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • ***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
  • The difference between the DOM, JavaScript and Python
  • The different environments of JavaScript
  • 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
  • The different environments of JavaScript
  • Parent, Sibling and Children DOM relationships
Course content
Expand all 104 lectures 05:37:36
+ Introduction
18 lectures 54:46

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 -

  1. Is the DOM a programming language? 

  2. Where does the DOM come from?

Preview 02:19
Lets learn about the DOM
00:00

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.

Everything is an object
02:01

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.

Building our own simple page
04:20

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!

Preview 07:05
A quick word about the console
00:58
DOM hierarchy conclusion
04:08

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.

What is the BOM
03:20

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.

Preview 03:42

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.

The DOM is not the same as your HTML
07:38

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.

The DOM is not what you see in the browser
02:18

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.

The DOM is not what you see in DevTools
01:42

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.

Pseudo Elements
08:17
Yee-haw ... What is the DOM
00:00

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.

Summary: What is the DOM?
02:52

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.

What can we do with the DOM?
01:08

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.

Preview 02:57

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!

DOM Introduction Quiz
5 questions
Face your fears - master the DOM
00:00
+ Bonus Section - JavaScript vs DOM
7 lectures 22:30

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.

What is the DOM API
03:07

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).

JavaScript lives in different environments
02:58

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

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

Lets build a setTimeout() function
09:23

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

Preview 03:20

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.

The DOM was not solely for JavaScript
03:13
DOM vs JavaScript
00:28

The differences between JavaScript and the DOM has caused a lot of confusion for developers - both beginners and experienced alike.

But not for you!

Enjoy these questions and have fun.

Bonus Quiz
4 questions
You've now mastered the difference between the DOM and JavaScript - well done!
00:00
+ Accessing the DOM
21 lectures 01:20:46

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.

Preview 01:37

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

Accessing the DOM - Intro
08:18
Cowabunga - its DOM time!
00:00

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.

Preview 02:55

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.

Lets build our page for this section
09:00

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 ...

Visual Studio Code - A Quick Word
01:58

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

getElementById()
02:17

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!

getElementById() Recap
03:20

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.

getElementsByClassName()
08:33

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.

TEST: Introduction
01:01
Test - Starting Code
00:14

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.

TEST: building our test code
10:41
Try complete the test on your own
00:00

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.

SOLUTION
11:39

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.

getElementsByTagName()
06:07

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.

querySelector - Introduction
03:09
Oops!
00:27

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

querySelector - practical example
06:26
Awesome sauce - What are the access methods?
00:00

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.

Summary
03:02

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.

We've covered what the DOM is, how it differs from JavaScript, and how we can access the DOM. These are skills you'll take with you in your career and all over the world ... so keep going. 

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.

Enjoy!

Quiz: Accessing the DOM
5 questions
Learn the DOM and take your skills to the next level ...
00:00
+ Nodes
15 lectures 40:53

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.

Nodes - Section Introduction
00:57
Don't get overwhelmed, we'll get there ...
00:00

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.

Nodes - Introduction
01:52
NODES NODES NODES
00:00

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

Nodes in action
04:23

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!

childNodes - How do we see nodes?
05:28

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.

Creating different nodes
04:14

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

What are the different types of Nodes?
03:34
Almost everything is a node
00:00

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.

Node - Family Tree
03:19

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? 

Identifying nodes
02:41

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.

HTMLCollection vs NodeList
02:28

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'.

Live vs Static lists
10:59
Why can't we use the parentNode method on an HTMLCollection directly?
00:57

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.

Nodes - Quiz
5 questions
I hope you love nodes as much as I do
00:00
+ Traversing the DOM
20 lectures 01:08:21

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

Section Introduction
02:15
What this section covers
00:37

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.

Traversing the DOM - Introduction
02:37
Why we traverse
01:06

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.

Building our section page together
03:43

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.

Why do we need to traverse the DOM?
01:36

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 3 most important objects in the DOM
03:02

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!

Parent, child and - a quick introduction
04:04

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!

Parent node
09:39

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.

Siblings in the DOM
03:52

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.

firstChild, lastChild and children - intro
04:35

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.

firstChild, lastChild and children - practical example
07:27

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.

Children property
02:54

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.

Preview 05:39

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!

Test - node types
02:03

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.

Test - solution
04:40

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.

Siblings - a quick word
00:55

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

Working with sibling methods
05:23

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!

Summary of traversing the DOM
02:14
Happy as Larry
00:00

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!

Quiz: Traversing the DOM
11 questions
+ Creating, Removing and Cloning DOM Elements
22 lectures 01:06:03

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.

Section introduction
01:18

I always like taking a step back, so we don't get lost in all the detail.

Take a step back
00:00

Static websites are just ... boring. Our goal is to have the skills and ability to create dynamic websites that increase click-through rates, user experience and conversions.

In other words, we want to have the ability to change the DOM at our leisure, dynamically.

Static vs Dynamic websites
01:46

The most important skill you can learn as a front-end web developer is the ability to create elements dynamically and then add those elements to the DOM.

This is why we're going to spend a few lectures on this topic - so you can truly master it.

How do you create elements
02:15

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.

Document vs document
05:22

Lets use the most well-known method available to use to dynamically add elements to our application. Take it in, and enjoy!

Preview 04:34

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.

Lets attach our element to the DOM
05:00

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.

Using the textContent property to add text to our newly created element
04:49

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.


How does appendChild work?
02:11

The insertBefore() method inserts a node as a child, right before an existing child, which you specify.

insertBefore() method
02:58

Although there's an insertBefore() method, there is not an insertAfter() method yet at the time of this lecture in 2020. But don't panic, we have a solution.

Is there an insertAfter() method?
02:23

As we've seen, there is no insertAfter() method. So then Clyde, how do we insert an element AFTER an element? Good question, and this lecture will give you a solution.

Lets trick the insertBefore() method
03:40

Great, you can add items to the DOM. But what if the user wants to delete an item from his shopping cart, for example? How can you deal with this? Easy. We can access a few DOM methods to remove elements from the DOM.

How to remove elements
02:28

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.

removeChild()
01:58

The remove() method removes the selected element (i.e. the element that you attach this method to), including all text and child nodes. But be careful, because this method also removes data and events of the selected elements.

remove()
03:28

We've used 2 different methods to remove an element from the DOM, but which method was introduced first and which is best to use? 

A quick word on the remove() method
00:31

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.

It's time to clone
02:55

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? 

Clone example using setInterval()
09:05

Are you curious how our clone method worked? If so, this lecture is perfect for you, as we jump into our <script> tag and take a deeper look at what we've just done.

Lets analyze our clone code
03:29

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.

Test your skills
01:22

I hope you gave the previous test a go. It doesn't matter if you couldn't finish it - the important point is that you gave it a go.

In this lecture we will code up the solution together.

Enjoy!

Test - solution
04:31

Cowabunga!

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.

Enjoy!

Quiz: Creating, Removing and Cloning DOM Elements
7 questions

Remember to laugh and have fun!

You've been cloned!
00:00
Requirements
  • 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
  • Basic HTML, CSS and JavaScript will be helpful, but not absolutely necessary
  • 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
Description

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.

How exactly does the browser model your HTML, CSS, and JavaScript? Where can we access this model? What can we do with this model? How can we change this model? By understanding these questions, you will be able to access the DOM and better yet, manipulate it! In other words, you will be able to create dynamic apps that improve user engagement and experience.


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.

The first step in understanding the DOM is understanding what it is. How does it differ from your HTML markup? How does it differ from JavaScript? From there, you’ll start exploring and experimenting with tools to access the DOM. You’ll learn simple, yet very powerful strategies to access and traverse the DOM. We don’t stop here, but then get into more advanced things like manipulating the DOM (via the create and remove methods given to us by the DOM API).

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.

Through practical examples, this course helps you understand the DOM piece by piece. And we use the latest and best features of JavaScript and browsers (like the new remove API) along the way so you can stay ahead of the pack.

*** 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.


Description

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?

Absolutely.

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 #1: You want to dabble in the world of programming. Learning the fundamentals of HTTP, CSS and how you can use JavaScript to change a webpage is the starting point to becoming a full-stack developer.

  • 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 #4: You want to start using backend frameworks like Node.js, but want to first understand how JavaScript is used on the front-end of your webpage.

  • 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.

  • Q&A support.

  • 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.

Who this course is for:
  • Anyone who has completed my JavaScript Complete Grandmaster course
  • Anyone who has completed my Web Developments Secrets course
  • YES: This course is for beginners. Aimed at people new to the world of web development. No previous JavaScript experience is necessary
  • 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 wanting to start using frameworks (e.g. like Angular or Node) that are heavily reliant on JavaScript and knowing the process flow of front-end web development
  • 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