DOM (Document Object Model) API

dom

1The 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.
2When a web page is loaded, the browser creates a DOM tree that represents the document's structure and content.
3Each node in the tree is represented as js object , which we can access and manipulate using the DOM API.
4Here , Html elements , comments , text , content , etc are refered as nodes of DOM tree.

dom api

1The 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.
2The 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

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

Target elements

getElementById('id_name')
- 1It returns reference of single element object where id_name matches
- 2
  Example:
  1let divone = document.getElementById("itemone"); 2console.log(divone);
getElementsByClassName('class_name')
- 1It returns htmlcollection all elements matches with class name.
- 2
  Example: Apply backgroundColor,margin,fontsize and padding on each div.
  1let div_child = document.getElementsByClassName("item"); 2console.log(div_child);

getElementsByTagName('tag_name')

1It returns htmlcollection all elements matches with tag name.

Example: Display parent div as flexbox.

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

1divs[0].style.backgroundColor = "yellow";
2divs[0].style.padding = "10px";
3divs[0].style.display = "flex";
4divs[0].style.gap = "10px";
5divs[0].style.justifyContent = "space-between";
6
7for (let i = 1; i < divs.length; i++) {
8  divs[i].style.backgroundColor = "blue";
9
10  divs[i].style.fontSize = "32px";
11  divs[i].style.padding = "10px";
12  divs[i].style.color = "white";
13}

querySelector('css_selector')
- 1It returns reference of the first element that matches a specified CSS selector.
- 2
  Example: Change fontSize of first div with 'item' class.
  1let ele = document.querySelector(".item"); 2ele.style.fontSize = "52px"; 3console.log(ele);
querySelectorAll('css_selector')
- 1It returns Nodelist of all elements that matches a specified CSS selector.
- 2
  Example: Change fontWeight of all div with 'item' class.
  1let eles = document.querySelectorAll(".item"); 2for (ref of eles) { 3 ref.style.fontWeight = "bold"; 4} 5console.log(ele);

Create and insert element

createElement('tag_name')
- 1It is used to create a new html element of the specified type and returns a reference to it as a javascript object.
- 2
  Example: Create section tag.
  1let sec = document.createElement("section"); 2console.log(sec)
appendChild(element)
- 1it is used to insert the element as last child.
- 2
  Example: Insert the section tag inside div tag having class 'container'.
  1let sec = document.createElement("section"); 2let pdiv = document.getElementsByClassName("container")[0]; 3pdiv.appendChild(sec);
  .
insertAdjacentElement('posiiton',element)
- 1It is used to insert an element as a child or sibling.
- 2Positions : beforebegin ,afterbegin , beforeend , afterend.
- 3
  Example: Show how to display element as child and sibling of div having class 'container'.
  1pdiv.insertAdjacentElement("beforebegin", sec); 2pdiv.insertAdjacentElement("afterend", sec); 3pdiv.insertAdjacentElement("afterbegin", sec); 4pdiv.insertAdjacentElement("beforeend", sec);

Insert text and Elements

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

insert and remove attribute

setAttribute('attribut_name','value')
- 1It is used to insert the attribute to an element.
- 2
  Example: Insert id="chombi" to third div in the container.
  1let divs = document.getElementsByClassName("item"); 2divs[2].setAttribute("id", "chombi");
removeAttribute('attribut_name')
- 1It is used to remove attribute from an element.
- 2
  Example: Remove id attribute from third div of container.
  1let divs = document.getElementsByClassName("item"); 2 3divs[2].removeAttribute("id");

traverse html nodes

parentElement
- 1It returns the reference of parent html element.
- 2
  Example: Print parent element of div whose class is "item".
  1let div_child = document.getElementsByClassName("item"); 2console.log(div_child[1].parentElement);
nextElementSibling
- 1It returns the reference of next html node sibling.
- 2
  Example: Print next sibling element of third div whose class is "item".
  1let div_child = document.getElementsByClassName("item"); 2console.log(div_child[1].parentElement);
previousElementSibling
- 1It returns the reference of next html node sibling.
- 2
  Example: Print previous sibling element of third div whose class is "item".
  1let div_child = document.getElementsByClassName("item"); 2console.log(div_child[2].previousElementSibling);
children
- 1It returns htmlcollection of html all childs element.
- 2
  Example: Print childrens elements of div whose class is "container".
  1let pdiv = document.getElementsByClassName("container")[0]; 2console.log(pdiv.children);
childNodes
- 1It returns Nodelist of all types of nodes like string , text , comment , etc.
- 2
  Example: Print all child nodes of div whose class is "container".
  1let pdiv = document.getElementsByClassName("container")[0]; 2console.log(pdiv.childNodes);

remove html element

remove()
- 1It is used to delete html element.
- 2
  Example: Remove p element from DOM.
  1let p = document.getElementsByTagName("p")[0]; 2p.remove();

dom

dom api

html structure

Reference Html structure

Target elements

getElementById('id_name')

Example:

getElementsByClassName('class_name')

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

getElementsByTagName('tag_name')

Example: Display parent div as flexbox.

querySelector('css_selector')

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

querySelectorAll('css_selector')

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

Create and insert element

createElement('tag_name')

Example: Create section tag.

appendChild(element)

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

insertAdjacentElement('posiiton',element)

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

Insert text and Elements

textContent

Example: Insert "Hello" text inside p tag.

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

innerHTML

Example: Insert "<strong>Hello</strong>" inside p tag .

Example: Insert "<strong>Hello</strong>" inside p tag and preserve previous text and element.

insert and remove attribute

setAttribute('attribut_name','value')

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

removeAttribute('attribut_name')

Example: Remove id attribute from third div of container.

traverse html nodes

parentElement

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

nextElementSibling

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

previousElementSibling

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

children

Example: Print childrens elements of div whose class is "container".

childNodes

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

remove html element

remove()

Example: Remove p element from DOM.