Working with sibling methods

Summary of traversing the DOM

Section Introduction

Traversing the DOM - Introduction

Building our section page together

The 3 most important objects in the DOM

Parent, child and siblings - a quick introduction

Why do we need to traverse the DOM

firstChild, lastChild and children - intro

Parent node

Children property

firstChild, lastChild and children - practical example

Test - node types

childNode vs children - what are the differences

Siblings - a quick word

Test - solution

Section introduction

Static vs Dynamic websites

How do you create elements

Document vs document

Lets attach our element to the DOM

Understanding the createElement() method

Using the textContent property to add text to our newly created element

How does appendChild work

insertBefore() method

Is there an insertAfter() method

How to remove elements

Lets trick the insertBefore() method

removeChild()

It's time to clone

remove()

Clone example using setInterval()

Lets analyze our clone code

Test your skills

Test - solution

Course Outro

Building our own simple page

DOM - Section Introduction

Everything is an object

DOM hierarchy conclusion

DOM hierarchy

What is the BOM

The DOM is not the same as your HTML

DOM vs JavaScript vs Python

The DOM is not what you see in the browser

The DOM is not what you see in DevTools

Pseudo Elements

Summary What is the DOM

What can we do with the DOM

Quick example of changing the DOM

What is the DOM API

JavaScript lives in different environments

Lets build a setTimeout() function

The DOM was not solely for JavaScript

setTimeout - JavaScript vs DOM

Section introduction

Accessing the DOM - Intro

Understanding your HTML

Lets build our page for this section

getElementById()

getElementById() Recap

TEST Introduction

TEST building our test code

getElementsByClassName()

SOLUTION

getElementsByTagName()

querySelector - Introduction

querySelector - practical example

Summary

Nodes - Section Introduction

Nodes - Introduction

Nodes in action

childNodes - How do we see nodes

What are the different types of Nodes

Creating different nodes

Node - Family Tree

HTMLCollection vs NodeList

Identifying nodes

Live vs Static lists