Resources
W3 Schools JavaScript and HTML DOM Reference
vanillalist.top - The Vanilla JavaScript Repository
Mozilla: A re-introduction to JavaScript (JS tutorial)
DOM
CSS classList
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("active");
Node versus Element
A node is the generic name for any type of object in the DOM hierarchy. A node could be one of the built-in DOM elements such as document or document.body, it could be an HTML tag specified in the HTML such as <input>
or <p>
or it could be a text node that is created by the system to hold a block of text inside another element. So, in a nutshell, a node is any DOM object.
An element is one specific type of node as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).