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.
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.
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);
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"); 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.
// change the color of the h1 and its align in the page const title = document.getElementsByTagName('h1'); title.style.color = 'blue'; title.style.textAlign = 'center';
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.