Navigating the Web: A Guide to the DOM

What is the DOM?

If you have been learning HTML and CSS then moving to JavaScript, you might have heard about the DOM(Document Object Model). Maybe with a vague understanding of what it means.
Today we will break down what the DOM actually is.

All the website on the internet rely on three key components HTML, CSS and JavaScript. These need to work together to make the magic happen. HTML lays the basic backbone and CSS make things look pretty and JavaScript achieve interactivity.
JavaScript can add more HTML to a page without the need to reload it and it can detect when an event happens on the page like a mouse click or a key press.

But how exactly does JavaScript have access to HTML elements? It's the DOM!
The DOM is a tree-like representation of the web page that gets loaded into the browser. If we are to change something in HTML, the DOM changes as well. The browser takes care of that synchronization.

For everything inside the HTML file, there is a different representation for it as an object or node; that way, a programming language like JavaScript can interact with the page.

The DOM is a web API that's part of the browser and is used to build websites.
.
The top object of the DOM holds the entire page is the Document object which nests inside the rest of the objects representing the page.

Traversing the DOM:

Document.querySelector(selectors): This method will return an element object of the first element in the document that matches the specified selector. Here's an example:

as you can see, I used the element selector to get the h1 element.

Document.querySelectorAll(): This method returns a NodeList of all elements in the document that match the specified CSS selector. Here it will return a collection of two p element nodes.

Document.createElement(): This method creates a new HTML element with the specified tag name.
Element.innerHTML: This property sets or returns the HTML content inside the selected element.
Element.setAttribute(): This method sets the value of a specified attribute on the current element.
Element.getAttribute(): This method returns the value of a specified attribute on the current element.
EventTarget.addEventListener(): This method attaches an event listener to the specified event target (e.g., a DOM element).
HTMLElement.style: This property represents the inline style of an HTML element and can be used to get or set CSS properties.
Node.appendChild(): This method adds a new child node to the end of the list of children of a specified parent node.
window.onload: This event is fired when the initial HTML document has finished loading.
window.scrollTo(): This method scrolls the window to a particular set of coordinates in the document.

and many more others...

In summary, the DOM is a crucial part of how JavaScript interacts with and manipulates web pages. It provides a tree-like representation of the HTML structure, allowing developers to access and modify individual elements programmatically.
The DOM is a fundamental concept in front-end web development, as it forms the bridge between the static HTML/CSS structure and the dynamic, interactive functionality powered by JavaScript. Mastering DOM manipulation is an essential skill for any aspiring web developer, as it unlocks the ability to create engaging and user-friendly web experiences. With the knowledge provided in this article, you now have a solid foundation to continue exploring and leveraging the power of the Document Object Model in your future projects.