DOM Manupulation

DOM -> Document Object Model

1. HTML page is a Document
2. HTML elements are Objects
3. HTML tree structure is the Model

console.log(document.all)
//gives us all the elements in the html file in the type of HTMLAllcollection
console.log(document.images)
// gives us all the img in the html file in the type of HTMLCollection
console.log(document.links)
//gives us all the links in the html file in the type of HTMLCollection
console.(document.forms)
// gives all all the forms in the html file in the type of **HTMLCollection.

---

Some document object methods to find/select/get document elements.

• To Get element by id:

  document.getElementById(id);

• To get elements by class name which gives us all the elements which has this same className in the type of HTMLCollection.

  document.getElementsByClassName(className);

• To get elements by tag name which gives us all the elements which has this same tagName in the type of HTMLCollection.

  document.getElementsByTagName(tagName);

• To get element using any of the selector(ex. classSelector, id, tagName) using only one method which gives the first matched element.

  document.querySelector(curresponding selector with its sign as prefix)
  
  //example
  document.querySelector(".className" | "#id" | "tagName" )
  ```javascript

• To get element using any of the selector(ex. classSelector, tagName) using only one method which gives all the elements which has this same tagName or classname in the type of NODEList.

  document.querySelectorAll(curresponding selector with its sign as prefix)
  
  // example
  document.querySelectorAll(".classname" | "tagName")

---

DOM Hierarchy Traversing (Parent/Child relation):

querySelector finds element from top to bottom
closest finds element from bottom to top

• Find element from parent to children.:

  const parent = document.querySelector(parent);
  const children = parent.children;

• Find element from grandParent to children:

  const grandParent = document.querySelector(grandParent)
  const children = grandParent.querySelectorAll(children)<br>

• Find element from children to parent:

  const children = document.querySelector(children)<br />
  const parent = children.parentElement

• Find element from children to grandParent:

  const grandParent = children.closest(grandParent);

• Finding sibling elements. Find next immediate sibling

  const childrenOne = document.querySelector(childrenOne);
  const childrenTwo = childrenOne.nextElementSibling;

• Find previous immediate sibling

  const childrenTwo = document.querySelector(childrenTwo);
  const childrenOne = childrenTwo.previousElementSibling;

---

Manipulate the DOM

appendChild() can only take one html element as argument
> append() can take both element and others(text, etc) also multiple elements as an argument.

• Creating an element

  const elementWantToCreate = document.createElement(tagNameWantToCreate);
  
  //example
  const divElement = document.createElement("div");
  const paragraph = document.createElement("p");

• add className to element using dom

  element.className = className;
  //example
  divElement.className = "item";

• set attribute using dom

  element.setAttribute(attributeName, attributeValue);
  //example
  divElement.setAttribute("id", "firstItem");

• append created element or element at the end of a container

  container.appendChild(elem);
  //example
  container.appendChild(divElement);

• append element before a childElement within container

  const childElm = document.querySelector("h2Elm");
  container.insertBefore(divElement, childElm);

• changing HTML content using dom

  const element = document.getElementById(id)
  element.innerHTML = newHTMl
  //or
  element.innerText = newText`

• changing html elements style using dom

  element.style.propertyName = propertyValue;

---

Listening to DOM Events:

DOM allows Javascript to react on HTML events
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

• trigger an action when someone click an element

  element.addEventListener(eventName, a function for what to do when this event triggered)
  
  element.addEventListener('click', (event) => {console.log(event)})

Examples of HTML events:

• When a user clicks the mouse
• When the mouse moves over an element
• When a web page has loaded
• When an image has been loaded
• When an input field is changed
• When an HTML form is submitted
• When a user strokes a key

Some common HTML events

Event	Description
click	when an user clicks an element
dblclick	when the user double click an element
input	when an element gets user input
blur	when an element losses blur
focus	when an element gets focus
mouseenter	when the pointer is moved onto an element
keydown	when a user is pressing a key
keyup	when a user releases a key

Project Overview

The project was created using most of the DOM methods.

• An user can add todo to the active TODO ul
• From the active todo ul user can
  • toggle todos from active to complete
  • edit a todo and
  • delete a todo
• In the complete todo ul section user can
  • toggle todos from complete to active and
  • delete todos

Image Overview

Finally, This would not have been possible to document this wonderful Topic about JS DOM without Sumit bhaiya's guideline.

Sumit bhaiya's Playlist about JS DOM

• Play with DOM - Bangla ( বাংলা ) DOM Tutorial