Member-only story
The DOM and Vanilla JS
Before we dive into the DOM, let’s talk about the structure of a webpage. A webpage consists of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). The HTML provides the basic structure for a webpage. It determines what elements appear any webpage and in what order. CSS is what controls the aesthetics of a webpage. It determines the colors, sizes, fonts, and other stylistic properties of the elements on a webpage. CSS is applied to HTML elements.
What is the DOM?
The Document Object Model (DOM) is the code that represents the content of a webpage, in other words, the HTML and CSS that make up a webpage. It acts as an interface between HTML and XML documents. When JavaScript or a similar language is used with HTML and CSS, it makes a webpage responsive and dynamic, meaning that the program changes in response to how a user interacts with it. The DOM represents the page so that programs can change the document structure, style, and content of a webpage.
The DOM represents the content of a webpage’s document as nodes and objects. It can be thought of like a tree with each node forming a new branch or sub-branch within the tree. The tree is a hierarchical structure in which nodes can have parent, child, or sibling nodes. This structure allows scripting languages to target elements, groups of elements, or sections of code to make changes to them. JavaScript was created specifically to manipulate the DOM. It allows programmers to create, read, update, or delete DOM nodes and their attributes.
The image below shows a DOM tree. The highest level of the DOM is the window, which represents an entire open window in the browser. The next level is the document, which is the root node for the entire HTML document. Each branch of this tree leads to other nodes.
Using JavaScript to Manipulate the DOM
Accessing DOM Elements
The query selector finds the first element or node that matches a specified parameter. The most common ways a query selector is used are to access elements of a certain type, elements with a…
