JavaScript DOM Tutorial

18 tutorials

All

Tailwind CSS

Build a Static Site with Figma & Astro

Django with HTMX

Node.js Tutorial for Beginners

JavaScript

Python 3 for Beginners

CSS Positioning Tutorial

Canva Tutorials

HTML Tutorial for Beginners

YouTube SEO Tutorial

PSD to Responsive Website

TypeScript Tutorial

Claude Code

Responsive Web Design

PSD to WordPress

GraphQL Crash Course

CSS Animation Tutorial

CSS Flexbox Tutorial

JavaScript ES6 Tutorial

Angular 2 Tutorial

SASS Tutorial

CSS Tips and Tricks

WebSockets (Socket.io) Tutorial

Asynchronous JavaScript

Grunt JS Tutorial

Styling HTML 5 Forms

Webpack Tutorial for Beginners

REST API Tutorial

Vue JS 2 Tutorial

Vuex Tutorial

JavaScript DOM Tutorial

CSS Grid Tutorial

OAuth Login (Passport.js) Tutorial

Django Tutorial

Object Oriented JavaScript Tutorial

#1 Introduction to the DOM

Understand the Document Object Model — what it is, how browsers build it, and why it matters for interactive web pages.

#2 Get Element By ID

Select a single element by its ID using getElementById — the fastest and most direct way to grab an element from the DOM.

#3 Get Elements By Class or Tag

Select multiple elements using getElementsByClassName and getElementsByTagName — work with HTMLCollections of matching elements.

#4 The Query Selector

Use querySelector and querySelectorAll — select elements with CSS selectors for maximum flexibility and precision.

#5 Changing Text & HTML Content

Modify element content with textContent, innerText, and innerHTML — understand the differences and when to use each.

#6 Nodes

Understand DOM nodes — element nodes, text nodes, comment nodes — and how every piece of the page is a node in the tree.

#7 Traversing the DOM (part 1)

Navigate the DOM tree — move from parent to child and access siblings using parentNode, children, firstChild, and lastChild.

#8 Traversing the DOM (part 2)

Navigate between sibling elements with nextSibling, previousSibling, and their element-only counterparts.

#9 Events

Listen for and respond to DOM events — attach event listeners to elements and handle clicks, mouse movements, and more.

#10 Event Bubbling

Understand event bubbling and event delegation — how events propagate up the DOM tree and how to use this for efficient event handling.

#11 Interacting with Forms

Read and manipulate form data — handle form submissions, access input values, prevent default behavior, and validate user input.

#12 Creating Elements

Create and insert new DOM elements dynamically — use createElement, textContent, and appendChild to build elements from JavaScript.