DOM Manipulation

DOM Basics

1. The Document Object Model (DOM) is a programming interface for web documents that represents the HTML or XML document as a tree structure, where each node represents an element, attribute, or piece of text in the document.

2. When a web page is loaded, the browser creates a DOM tree that represents the document's structure and content.

3. Each node in the tree is represented as js object, which we can access and manipulate using the DOM API.

4. Here, Html elements, comments, text, content, etc are refered as nodes of DOM tree.

DOM API

1. The DOM API (Application Programming Interface) is a set of programming interfaces and methods that allow developers to interact with the DOM tree and manipulate the content and structure of web documents.

2. The DOM API provides a standardized way to create, modify, and delete elements and attributes, change styles and classes, handle events, and more.

HTML Structure

Reference HTML structure:

<body>
  <h1>Falling In Love With Javascript</h1>
  <div class="container">
    <div class="item item1" id="itemone">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div id="itemfour" class="item item4">4</div>
    <div class="item item5">5</div>
  </div>
  <p>hello i'm paragraph</p>
</body>

Target Elements

1. getElementById('id_name')

It returns reference of single element object where id_name matches

Example:

let divone = document.getElementById("itemone");
console.log(divone);

2. getElementsByClassName('class_name')

It returns HTMLCollection of all elements matching the class name

Example: Apply backgroundColor, margin, fontsize and padding on each div.

let div_child = document.getElementsByClassName("item");            
console.log(div_child);

3. getElementsByTagName('tag_name')

It returns HTMLCollection of all elements matching the tag name

Example: Display parent div as flexbox.

let divs = document.getElementsByTagName("div");
console.log(divs)

divs[0].style.backgroundColor = "yellow";
divs[0].style.padding = "10px";
divs[0].style.display = "flex";
divs[0].style.gap = "10px";
divs[0].style.justifyContent = "space-between";

for (let i = 1; i < divs.length; i++) {
  divs[i].style.backgroundColor = "blue";
  divs[i].style.fontSize = "32px";
  divs[i].style.padding = "10px";
  divs[i].style.color = "white";
}

4. querySelector('css_selector')

It returns reference of the first element that matches a specified CSS selector

Example: Change fontSize of first div with 'item' class.

let ele = document.querySelector(".item");
ele.style.fontSize = "52px";
console.log(ele);

5. querySelectorAll('css_selector')

It returns NodeList of all elements that matches a specified CSS selector

Example: Change fontWeight of all div with 'item' class.

let eles = document.querySelectorAll(".item");
for (ref of eles) {
  ref.style.fontWeight = "bold";
}
console.log(ele);

Create and Insert Element

1. createElement('tag_name')

It is used to create a new html element of the specified type and returns a reference to it as a javascript object

Example: Create section tag

let sec = document.createElement("section");
console.log(sec)

2. appendChild(element)

It is used to insert the element as last child

Example: Insert the section tag inside div tag having class 'container'

let sec = document.createElement("section");
let pdiv = document.getElementsByClassName("container")[0];
pdiv.appendChild(sec);

3. insertAdjacentElement('position',element)

It is used to insert an element as a child or sibling
Positions: beforebegin, afterbegin, beforeend, afterend

Example: Show how to display element as child and sibling of div having class 'container'

pdiv.insertAdjacentElement("beforebegin", sec);
pdiv.insertAdjacentElement("afterend", sec);
pdiv.insertAdjacentElement("afterbegin", sec);
pdiv.insertAdjacentElement("beforeend", sec);

Insert Text and Elements

1. textContent

It is used to insert text inside element

Example: Insert "Hello" text inside p tag

let p = document.getElementsByTagName("p")[0];
p.textContent="Hello";

Example: Insert "Hello" text inside p tag and preserve previous text also

let p = document.getElementsByTagName("p")[0];
p.textContent +="Hello";

2. innerHTML

It is used to insert text and html tag inside element
Example: Insert "Hello" inside p tag
```
let p = document.getElementsByTagName("p")[0];
p.innerHTML="Hello";
```
Example: Insert "Hello" inside p tag and preserve previous text and element
```
let p = document.getElementsByTagName("p")[0];
p.innerHTML+="Hello";
```

Insert and Remove Attribute

1. setAttribute('attribute_name','value')

It is used to insert the attribute to an element

Example: Insert id="chombi" to third div in the container

let divs = document.getElementsByClassName("item");
divs[2].setAttribute("id", "chombi");

2. removeAttribute('attribute_name')

It is used to remove attribute from an element

Example: Remove id attribute from third div of container

let divs = document.getElementsByClassName("item");
divs[2].removeAttribute("id");

Traverse HTML Nodes

1. parentElement

It returns the reference of parent html element

Example: Print parent element of div whose class is "item"

let div_child = document.getElementsByClassName("item");
console.log(div_child[1].parentElement);

2. nextElementSibling

It returns the reference of next html node sibling

Example: Print next sibling element of third div whose class is "item"

let div_child = document.getElementsByClassName("item");
console.log(div_child[1].nextElementSibling);

3. previousElementSibling

It returns the reference of previous html node sibling

Example: Print previous sibling element of third div whose class is "item"

let div_child = document.getElementsByClassName("item");
console.log(div_child[2].previousElementSibling);

4. children

It returns HTMLCollection of html all child elements

Example: Print children elements of div whose class is "container"

let pdiv = document.getElementsByClassName("container")[0];
console.log(pdiv.children);

5. childNodes

It returns NodeList of all types of nodes like string, text, comment, etc

Example: Print all child nodes of div whose class is "container"

let pdiv = document.getElementsByClassName("container")[0];
console.log(pdiv.childNodes);

Remove HTML Element

1. remove()

It is used to delete html element

Example: Remove p element from DOM

let p = document.getElementsByTagName("p")[0];
p.remove();