Introduction

In this article I will explain what the JavaScript DOM (Document Object Model) is and at the end of this article you might even be able to manipulate it.

Lets get into it.

What is the DOM?

The Document Object Model is a tree-like representation of the the structure and contents of a webpage. Just like a family tree.

We call a data structure a tree when it has a branching structure and a single, well-defined root. In the case of the DOM, the document serves as the root node.

And just as any other tree has nodes, the same goes for the DOM. And we call these Elements, which represent HTML tags and determine the structure of the document. Other elements like the head and body tags can also serve as parent nodes to their own child nodes.

Why is it important?

The DOM serves as the backbone of every web page. It provides a structured representation of all the components and content of HTML or XML documents which allows developers to navigate, access and manipulate them. It also allows web developers the ability to create dynamic and interactive content for users.

Targeting nodes.

When working with the DOM, we use " selectors " to target the nodes we want to work with. You can use a combination of CSS-style selectors and relationship properties to target the nodes.

You can also use relational selectors (firstElementChild or lastElementChild) with special properties owned by the nodes.

DOM methods

DOM methods are functions provided by the DOM interface that allow us to access and manipulate HTML elements on web pages using JavaScript. Here are some examples.

querySelector()

querySelector() selects the first element that matches a given CSS selector.

const element = document.querySelector("#elementId");

querySelectorAll()

querySelectorAll() selects all matching elements.

const element = document.querySelectorAll(".className");

getElementById()

This method selects based on the id attribute of an element on the page.

const element = document.querySelector("elementID");

getElementsByClassName()

This method is used to select all elements belonging to a particular class.

const element = document.getElementsByClassName("className");

getElementsByTagName()

This method is used to select all elements with a specific tag.

const element = document.getElementsByTagName("div");

DOM manipulation

This refers to the process of dynamically modifying the structure, changing page content, adding new elements, removing existing elements, and updating style properties.

Creating a new Element :

document.createElement(tagName, [options]) - creates a new element of tag type tagName. [options] in this case means you can add some optional parameters to the function.

const newElement = document.createElement("div");

📌 This function does NOT put your new element into the DOM - it creates it in memory.

This is so that you can manipulate the element (by adding styles, classes, ids, text, etc.) before placing it on the page.

You can place the element into the DOM with one of the following methods.

1. parentNode.appendChild(childNode) 

2. parentNode.insertBefore(newNode, referenceNode)

Removing Elements :

To remove an existing element, we must find the parent element of the element and then use the removeChild()method.

const removeElement = document.getElementById("elementId");
removeElement.parentNode.removeChild(removeElement);

Changing Text Content :

We can use textContent or innerHTML properties to change the text content of an element within the DOM.

const element = document.getElementById("myelementId");
element.textContent = "Hello World! ";

💡 Note that using textContent is preferred over innerHTML for adding text.

Altering Elements :

We can change the CSS style properties and other properties of the elements.

const element = document.getElementById("elementId");
element.style.color = "red";

Keep in mind that the JavaScript does not alter your HTML, but the DOM - your HTML file will look the same, but the JavaScript changes what the browser renders.

You can inspect the DOM structure of a web page using your browser's developer tool.

1. Open Developer Tools: Right-click on the element you want to inspect and select "Inspect" or press Ctrl + Shift + I (or Cmd + Option + I on macOS) to open the Developer Tools panel.

2. Inspect Element: Click on any element in the DOM inspector to view its properties, styles, and event listeners in the browser's developer tools panel.

Conclusion

DOM is a fundamental concept in the world of modern web development. Get manipulating, you're good to go.

Found this blog post helpful? Consider sharing it with others who might benefit as well.

If you have questions or any feedback please let me know in the comments. It will help me improve this and more blogs to come.

Thanks for reading and see you in the next one!