DOM Manipulation Hindi | Javascript Hindi Course For Beginners ( 2023 ) #9

When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
 
by Using DOM javascript can do following things
  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page
 
 

DOM Nodes

Everything in an HTML document is a node
  • The entire document is a document node
  • Every HTML element is an element node
  • The text inside HTML elements are text nodes
  • All comments are comment nodes
notion image

Navigating Between Nodes

You can use the following node properties to navigate between nodes with JavaScript:
  • parentNode → for getting parent nodes

console.log(document.body.parentNode);

// This will select parent of body 
// parent of body is html
notion image
  • childNodes → for selecting all child node of parents
// Select Child nodes of body
console.log(document.body.childNodes);
notion image
 
  • firstChild → for getting first child node from parent node
  • lastChild → for getting last child node from parent node
  • nextSibling → for getting next sibling of current node
  • previousSibling → for getting prev sibling of current node
 
Note: Selecting a element using nodes is not efficient
We can directly select Element nodes
Javascript provides functions to traverse elements nodes we can use them to eliminate text and comment nodes
children → for getting all element nodes
firstElementChild → for getting first element nodes
lastElementChild → for getting last element nodes
nextElementSibling → for getting next siblings element nodes
previousElementSibling → for getting prev siblings element nodes
 
There is even better way to select element in DOM elements
getElementById → we can directly select element using its id
getElementByClassName → we can select element using its class name
getElementByName → we can select element using name attribute
getElementByTagName → we can select element using tag
 
querySelector → using specific query we can select elements
for selecting element with id we can use → #someId → here we need to append ‘#’ to get element by its id
for selecting element with class we can use → .someClass → here we need to append ‘.’ to get element by its id
This will return only one element
querySelectorAll → its behave same as queryselector but its return multiple elements nodes
 
CRUD of attributes
getAttribute → it will return attribute values
setAttribute → for setting own attribute
removeAttribute → for removing attribute
hasAttribute → for checking attribute exist or not
 
Note → correct way of creating custom attributes
“data-coding” use this syntax
using dataset you can access attribute values
 
More Operations we can perform on element nodes
createElement(”div”) → for creating new element we use this syntax
createTextNode(”Hello”) → for creating text element we use this syntax
append() → for attaching element at end of other element ( inside )
prepend() → for attaching element at start of other element ( inside )
before() → for attaching element , before other element
after() → for attaching element , after other element
replaceWith() → for replacing element with other element
remove() → for removing element
classlist.remove(”name”) → removes class
classlist.add(”name”) → add class
classlist.toggle(”name”) → if exist then remove , if not exist then adds
 
innerHtml() → for adding html inside other element
outerHtml() → for adding html outside
 

Events

When user interacts with website or ui changes with due to some change, this is called events.
examples of events
  • The user selects, clicks, or hovers the cursor over a certain element.
  • The user chooses a key on the keyboard.
  • The user resizes or closes the browser window.
  • A web page finishes loading.
  • A form is submitted.
  • A video is played, paused, or ends.
  • An error occurs.
    Basic Event example 
    const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.addEventListener("click", () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});