DOM (Document Object Model) API
By Saket Bhatnagar••Beginner to Intermediate
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
- 1
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.
- 2
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";67for (let i = 1; i < divs.length; i++) {8 divs[i].style.backgroundColor = "blue";910 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 "<strong>Hello</strong>" inside p tag .
1let p = document.getElementsByTagName("p")[0];2p.innerHTML="<strong>Hello</strong>";Example: Insert "<strong>Hello</strong>" inside p tag and preserve previous text and element.
1let p = document.getElementsByTagName("p")[0];2p.innerHTML+="<strong>Hello</strong>";
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");23divs[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();