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

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.

Its the same with JavaScript.

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

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

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

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

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

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.

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!

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.

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

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.

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!

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.

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

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.

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.

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.

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 insertBefore() method inserts a node as a child, right before an existing child, which you specify.

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.

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.

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.

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.

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.

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? 

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? 

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.

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.

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!

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!

Remember to laugh and have fun!