JavaScript DOM Manipulation in Details

To have a solid understanding of the structure of an HTML page. Let’s add a basic code.

<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Manipulation</title>
  </head>
<body>
<h1>DOM Manipulation</h1>
<p>This a simple DOM manipulation example</p>
<p>More information about <a  href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM API</a></p>
</body>
</html>

The browser will run that HTML code and build a representation of its structure, then use that representation to display the elements to the screen.

A user programmer can interact with the structure of the page, (with the help of code), modify or remove elements from the page. All of which is possible with the JavaScript programming language.

To make a representation of the HTML structure in our heads, think of a tree, where each node may refer to other nodes, (children) which in turn may have their children.

The DOM stands for Document Object Model. It is a representation of a web page hierarchy of objects where each object corresponds to a node in the page tree. DOM objects have properties and methods that can be manipulated with JavaScript.

Basic tree representation of the sample code provided above.

Accessing the DOM with document variable

This variable is an object and has head et body properties that allow access to the <head> and <body> elements of the page, respectively.

const root = document; 
// root holds the root object
console.log(root);
const head = document.head; 
// head holds the head object
console.log(head);
const body = document.body;
//body holds the body object
console.log(body);

Accessing DOM node one by one can be an overwhelming task to do. For instance, if we want a node in the middle of the HTML structure, the order will change in future modification. Your code will not have the expected behavior, to remedy that situation. JavaScript also gives you access to several additional convenience links.

Access the element by its tag’s name.

So if we want to get the href attribute of the link in that document, we don’t want to say something like “Get the second child of the sixth child of the document body”. It’d be better if we could say “Get the first link in the document”. And we can.

const link = document.body.getElementsByTagName("a")[0];
console.log(link.href);

Using the document.getElementsByTagName() method, which collects all elements with the given tag name that are descendants (direct or indirect children) of that node and returns them as an array-like object.

2. Access the element by its id.

To find a specific single node, you can give it an id attribute and use document.getElementById() instead.


  const para = document.getElementById("para");
  console.log(para.textContent);

3. Changing the document.

What makes building dynamic web page interesting is the DOM data structure can be changed at will, we can add or remove almost everything. Nodes have available the remove method to remove them from their current parent node. To add a child node to an element we can use the appenChild(), which puts it at the end of the list of children or insertBefore(a, b), which inserts the node given as the first argument before the second one.

4. Create a new node element.

To create element nodes, you can use the method. This method takes a tag name and returns a new empty node of the given type.

// create a new div 
const newDiv = document.createElement("div");

// add text to that div
newDiv.textContent = 'new created element';

/* we can add the new created div at the end of the document or         
before a specific element */
document.body.innerHTML.appendChild(newDiv);
// with that line the new div is added at end of the root document

5. Change the styling of the element.

JavaScript code can directly manipulate the style of an element through the element’s property. This property holds an object that has properties for all possible style properties. The values of these properties are strings, which we can write to change a particular aspect of the element’s style. Some style property names contain hyphens, such as font-family. Because such property names are awkward to work within JavaScript (you’d have to say style["font-family"]), the property names in the style object for such properties have their hyphens removed and the letters after them capitalized (style.fontFamily).

// change the color of the h1 and its align in the page
const title = document.getElementsByTagName('h1')[0];
title.style.color = 'blue';
title.style.textAlign = 'center';

Conclusion

The DOM is organized like a tree, in which elements are arranged hierarchically according to the structure of the document. The objects representing elements have properties such as parentNode and childNodes, which can be used to navigate through this tree.