Black Beard's Blog
Understanding the Document Object Model (DOM)

Photo by Jackson Sophat on Unsplash

Understanding the Document Object Model (DOM)

Black Beard's photo
Black Beard
·

5 min read

Document Object Model : It presents the HTML document in a structured manner, allowing us to access and modify the data of the web page using scripts.

Tree Representation

The DOM represents a document as a tree of nodes, with each node representing a part of the document, such as an element, an element's attribute, or the text content within an element

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1 id ="head" class="heading">Document</h1>
    <p>Hello World!</p>
  </body>
</html>

Let's try to understand the tree representation of the above code. In the tree representation, all tags, attributes, and text content are represented as nodes. Tag names are represented as element nodes, attributes as attribute nodes, and text content as text nodes.

The root of all node is a document node.

The document node consists of two element tags: DOCTYPE and HTML. The HTML element has two child elements: HEAD and BODY (element node). Both HEAD and BODY each contain two child elements.

The HEAD tag has META and TITLE tags as children. The TITLE tag contains an H1 tag and a P tag as its children.

Let's examine these four child elements more closely:

  1. The META tag has an attribute charset (attribute node).

  2. The TITLE tag has text content "document" (text node).

  3. The H1 tag has two attributes, id and class (attribute node), and text content "document" (text node).

  4. The P tag has text content "Hello World!" (text node).

Api and Methods

The DOM offers a variety of powerful APIs and methods for accessing and modifying webpage data. Key methods include:

  • .getElementById('')

  • .getElementsByClassName('')

  • .querySelector('')

  • .createElement('')

In this discussion, we will explore how to manipulate elements using these APIs and methods.

We will be using the above HTML code for DOM manipulation examples unless noted otherwise...

Selecting The Elements

document.getElementById('') : returns an element
this method takes an ID as an argument and returns the first element with a matching ID.

document.querySelectorAll(selector) : returns the Node List
this method takes a CSS selector as an argument and returns a NodeList containing all matching elements. The NodeList is an array-like structure.

document.getElementsByClassName(class name) : returns Html Collection
this method takes a class name as an argument and returns an HTMLCollection that contains all elements with the specified class name. The HTMLCollection is an array-like structure that automatically updates when the document changes.

document.getElementsByTagName(tag name) : returns Html Collection
this method takes a tag name as an argument and returns an HTMLCollection that contains all elements with the specified tag name. The HTMLCollection is an array-like structure that automatically updates when the document changes.

Manipulating Elements

Creating an element

whenever we need to create an element, we can use createElement(element name) method provided by DOM, for this example we will be creating div element, but it can be any other element whether its paragraph, heading, span, etc. The element we create most of the time needs to have some attributes and text in it. To add an attribute in an element, we will use setAttribute( "attribute name", "attribute value" ) method, for this example we will be using attribute class and its value will be parent. Now we will use textContent property to add text in our element. Till now we have created an element, we added attributes and text in it but, its not visible in the screen, Why? The reason is, the created element is in the memory, we haven't add it to the document tree. To add the element in the document tree we have to use appendChild(element) method.

let element = document.createElement('div');
element.setAttribute("class", "parent"); 
element.textContent = "This is our new Element";
document.body.appendChild(element);

Modifying an element

Adding text content

Let's see how we can change the text content of the an element, so what is the first thing we need? we need to select the element we need to do modification in and to select we will use querySelector( "selector" ) for this example we will select the element whose tag name is 'p', so the selected element will be <p>Hello World!</p> and now we will use its textContent property, to change its text content,
element.textContent = "We Changed The Paragraph";. This is how we change the text content of an element.

Point to remember: The textContent property will overwrite existing text content of an element.

So, what if we need to append the new text without overwriting existing text? if the goal is to append we will use += operator with textContent.

element.textContent += " We Changed The Paragraph"

//which will look like
element.textContent = element.textContent + " We Changed The Paragraph"

This will create a new string by concatenating the existing text content with the new text, and then sets the text content property to this new string.

Adding attributes

Mostly all the elements in a document have certain attribute in them, whether its class, id, src, href, etc. While creating element above, we use setAttribute() method to add the class attribute. setAttribute() method is very handy for adding attributes while creating an element and for the attribute which have only one value. setAttribute() is a very easy to use, it takes two argument - attribute name and attribute value.

  element.setAttribute("attribute name", "attribute value"); 

  element.setAttribute("class", "para"); 
  element.setAttribute("id", "elementId"); 
  element.setAttribute("href", "https://example.com");

Point to remember: The setAttribute method will overwrite existing attribute value of an element.

Removing an element

Now we've seen how to create and manipulate an element, now we will see how to remove an element. To remove an element we have two methods element.remove() and parent.removeChild(child).

<body>
  <h1 class="heading">Document</h1>

  <p>Hello World!</p>

  <ul class="list">
    <li class="list-item">One</li>
    <li class="list-item">Two</li>
    <li class="list-item">there</li>
    <li class="list-item">four</li>
  </ul>
</body>

let p = document.querySelector('p')
p.remove()

let ul = document.querySelector('.list')
let child = document.querySelector('li:nth-child(2)')
ul.removeChild(child)

In this discussion, we have explored what the DOM is and how the DOM tree structure is constructed. We also examined the methods and APIs provided by the DOM and how to use them to manipulate the document. I hope this article has given you a good understanding of the DOM. Stay tuned for my next article, and in the meantime, feel free to experiment with the DOM API. Happy coding!

2Articles1WeekHashnode