Ashish's Blog

Understanding DOM in JS

Understanding DOM in JS

Ashish's photo
Ashish
·

4 min read

Table of contents

The Document Object Model (DOM) is a programming interface for HTML and XML documents that allows developers to access and manipulate the structure of a web page in real-time. In this blog post, we will take a deep dive into the DOM, starting with an overview of its structure and the different types of nodes that make up a web page, and then moving on to explore the various methods and properties available for working with the DOM in JavaScript.

1. Structure of the DOM

The DOM represents the structure of a web page as a tree-like hierarchy of nodes. The root of the tree is the document object, which corresponds to the entire web page. Each element on the page is represented by a node in the tree, and the relationships between elements are represented by parent-child relationships between nodes. For example, in the following HTML code:

<body>
  <h1>My Page</h1>
  <p>This is my web page.</p>
</body>

The <body> element is the parent node of the <h1> and <p> elements, which are child nodes.

Types of Nodes

There are several different types of nodes in the DOM, each with a specific purpose and set of properties and methods. The most commonly used types of nodes include:

  • Document: The root node of the DOM tree, representing the entire web page.

  • Element: Represents an HTML or XML element on the page, such as <p> or <div>.

  • Text: Represents the text content of an element.

  • Attribute : Represents an attribute of an element, such as href in <a href="https://example.com">Example</a>

2. Accessing Elements

The most basic way to access an element in the DOM is to use the document.getElementById() method, which returns the element with the specified ID. For example, the following code gets the element with the ID "my-element" and sets its text content to "Hello World!":

let myElement = document.getElementById("my-element");
myElement.textContent = "Hello World!";

You can also access elements by class name and tag name using the document.getElementsByClassName() and document.getElementsByTagName() methods, respectively. These methods return a collection of elements, rather than a single element, so you'll need to use an array-like object to access individual elements.

3. Creating and Modifying Elements

In addition to accessing elements, you can also create new elements and modify existing ones. The document.createElement() method creates a new element, while the appendChild() method adds it to the DOM as a child of a specified element. For example, the following code creates a new <p> element with the text "Hello World!" and adds it to the end of the <body> element:

let newP = document.createElement("p");
newP.textContent = "Hello World!";
document.body.appendChild(newP);

You can also use the innerHTML property to set the HTML content of an element. For example, the following code sets the HTML content of an element with the ID "my-element" to a list of items:

let myElement = document.getElementById("my--element");
myElement.innerHTML = "<ul><li>Item 1</li><li>Item 2</li></ul>";

You can also remove elements from the DOM using the removeChild() method. This method removes a specified child node from the DOM, along with all of its children. For example, the following code removes a <p> element with the ID "my-element" from the <body> element:

let myElement = document.getElementById("my-element");
document.body.removeChild(myElement);

4. Manipulating Attributes

You can also manipulate the attributes of an element using the setAttribute() and getattribute() methods. For example, the following code sets the href attribute of a link element with the ID "my-link" to "example.com":

let myLink = document.getElementById("my-link");
myLink.setAttribute("href", "https://example.com");

You can also use the getAttribute() method to retrieve the value of an attribute. For example, the following code retrieves the href attribute of the same link element:

let myLink = document.getElementById("my-link");
let hrefValue = myLink.getAttribute("href");
console.log(hrefValue); // "https://example.com"

5. Manipulating Styles

You can also change the style of an element using the style property. The style property returns an object that represents the inline style of an element. You can use the object to set or get the values of any CSS property. For example, the following code changes the background color of an element with the ID "my-element" to red:

let myElement = document.getElementById("my-element");
myElement.style.backgroundColor = "red";

6. Traversing the DOM

Traversing the DOM refers to moving through the different nodes in the tree structure of the DOM. There are several properties that can be used to traverse the DOM, including childNodes, firstChild, lastChild, nextSibling, previousSibling, parentNode, etc.

For example, the following code traverses the child nodes of an element with the ID "my-element" and logs the nodeType and nodeName of each child:

let myElement = document.getElementById("my-element");
for (let i = 0; i < myElement.childNodes.length; i++) {
  let child = myElement.childNodes[i];
  console.log("Node type: " + child.nodeType);
  console.log("Node name: " + child.nodeName);
}
DOMjsWeb Development