JavaScript DOM Tutorial - Document Object Model in JavaScript

This beginner tutorial introduces the JavaScript Document Object Model for selecting and navigating HTML elements, changing content and styles, and removing or creating nodes dynamically.

Syllabus

The Document Object Model: DOM
Selecting an element with an ID
Selecting an element with a query selector
Changing the CSS with the style property
Selecting elements by class name
Selecting elements with querySelectorAll
HTMLCollection vs NodeList
Searching within the results of a previous selector
Selecting elements by tag name
Applying more specific DOM selectors
Modifying CSS with a DOM selector
Changing text inside of an element
Changing the HTML within a parent element
Navigating the DOM tree
Removing all the nodes in a parent element
Creating new elements
Adding new property values to the element
Appending the new element to the DOM
Creating new elements with a loop