1. The DOM
The Document Object Model (DOM), represents the web page (aka. document) as nodes and objects organized into a treelike structure. This way, programming languages - like JavaScript - can interact with the page.
If you're new to front end development, the DOM (Document Object Model) can seem a little intimidating. This guide walks through: what the DOM is and how you can utilize JavaScript to work with elements on the page.
Easy Way to Understand How the DOM Works
2. Interacting with the DOM
Use JavaScript to add, delete, or alter page content, control page styling, and respond to user actions.
In this video series we are going to learn modern JavaScript from scratch. This video is recommended for anyone wanting to learn JavaScript the modern way with ES2015. No previous programming knowledge is required, so this video series will help you learn JavaScript as your first programming language.
Javascript Dom Manipulation | Javascript Tutorial For Beginners
JavaScript allows you to select elements from the DOM of a website and then make changes to those elements.
Selecting & Changing Website Elements (DOM manipulation)
3. Events
... this JavaScript DOM tutorial I'll explain how we can attach event listeners to elements on a page, which can react to DOM events such as click, submit etc.
Events - JavaScript DOM Tutorial
Learn about Event Listeners, Event-driven programming and how to use Event Listeners to control user interactions on web pages or web apps.
Introduction to JavaScript Event Listeners
When JavaScript is used in HTML pages, JavaScript can "react" on these events.
JavaScript Events - W3Schools
JavaScript in the browser uses an event-driven programming model. Everything starts by following an event. This is an introduction to JavaScript events and how event handling works