The Document Object Model (DOM) is a programming interface for webpages. It represents the page in code so that your scripts can change the document structure, style, and content. The DOM represents the document as nodes and objects; this way, programming languages can interact with the page.
The DOM tree structure organizes nodes in a hierarchical manner, akin to a family tree. Each node may have parents, children, and siblings, reflecting their relationships in the document. This hierarchy is essential for navigating and manipulating the document, as it determines how changes to one node can impact its related nodes. Understanding this tree-like structure is key for efficiently targeting and modifying elements within a web page.
JavaScript provides a comprehensive toolkit for interacting with the DOM, allowing developers to create, modify, and manage HTML. These tools are a set of methods that come built into JavaScript, enabling you to manipulate the document without needing to write the underlying functions yourself. This lecture features the most frequently used DOM manipulation methods. You can achieve very complex interactions and experiences with this set.
Creating, Selecting and Adding Elements
document.querySelector()
Gets the first element that matches a specified CSS selector. For instance, document.querySelector('.class-name') selects the first element with the class class-name.
document.querySelectorAll()
The same as document.querySelector, but instead gets an array of all elements with the specified class name.
document.createElement()
Creates a new HTML element. For example, document.createElement('div') creates a new <div> element. You can essentially create any HTML element with this. But, you then have to use another function to actually put the element on the page.
.appendChild()
This method adds an element as the last child of a parent element. For example, if you have a parent element and want to add a new child to it, you would use parent.appendChild(child).
.insertAdjacentElement()
This method inserts an element in a specified position relative to another element. It’s a more advanced version of appendChild(). It’s used like element.insertAdjacentElement(position, elementToInsert), where position can be one of four strings: 'beforebegin', 'afterbegin', 'beforeend', and 'afterend'. The difference between these is a little nuanced, and I’d recommend you look it up here.
Working with CSS
.classList.add()
Adds a class to an element’s list of classes. For example, element.classList.add('new-class') adds 'new-class' to element.
.classList.remove()
Removes a class from an element’s list of classes.
.classList.contains()
Checks if an element contains a certain class, returning true or false.
Iterating Over Collections
.forEach()
This method executes a provided function once for each array element. If you have an array of elements and want to perform an action on each one, .forEach() is an excellent tool.
Event Handling
.addEventListener()
This method is used to listen for events on an element. For instance, element.addEventListener('click', function) adds a click event listener that executes the function when the element is clicked.
Timing Functions
setTimeout()
Executes a function once after a specified number of milliseconds. It’s great for delaying actions.
setInterval()
Repeatedly calls a function with a fixed time delay between each call. Useful for recurring actions.
Template Literals
${}
In JavaScript, template literals allow you to insert the values of variables into strings. For setting styles, you can dynamically assign values, like element.style.width = ${value}px``. Or you can make dynamic text.
Putting It Together
With these tools at your fingertips, you are well equipped to make some very interesting things. We are going to walk through three examples that make use of all of the features above, in varying ways.