#dom
- 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
- 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
1. getElementById('id_name')
- 1. It returns reference of single element object where id_name matches
- 2.
Example:
1let divone = document.getElementById("itemone");2console.log(divone);
2. getElementsByClassName('class_name')
- 1. It 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);
3. getElementsByTagName('tag_name')
- 1. It 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}
4. querySelector('css_selector')
- 1. It 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);
5. querySelectorAll('css_selector')
- 1. It 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
1. createElement('tag_name')
- 1. It 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)
2. appendChild(element)
- 1. it 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);
3. insertAdjacentElement('posiiton',element)
- 1. It is used to insert an element as a child or sibling.
- 2. Positions : 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
1. textContent
- 1. It 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";
2. innerHTML
- 1. It 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
1. setAttribute('attribut_name','value')
- 1. It 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");
2. removeAttribute('attribut_name')
- 1. It 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
1. parentElement
- 1. It 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);
2. nextElementSibling
- 1. It 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);
3. previousElementSibling
- 1. It 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);
4. children
- 1. It 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);
5. childNodes
- 1. It 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
1. remove()
- 1. It is used to delete html element.
- 2.
Example: Remove p element from DOM.
1let p = document.getElementsByTagName("p")[0];2p.remove();