DOM+Modrern js

part 1

---------------------------------------
window is a global object created by browser repreneted by browser window

top level entity

Dom-Documnet object Model

pura html code ko js ke object mai convert kar diya isko bolte hain dom

Bom- used to comunicate with browser

other than content (Browser object Model) alert like thing

document.getElementbyId('heading') called on documnt object

documnet.getElemetsByClassName()
it return array like object we get htmlcollection in return

getsElemetsbyTagName() it reyurn multiple ites like above

querySelector(# or , or tag name nameof the elemetn)

it returns only single object or frist object

for multiple object querySelectorAll()

it returns multiple object or frist object

Update Existing Properties\

1-->innerHTML-used to get and set elements

2--->outerHTml

3->textContent and inerHtml ot get/set textual properties

4->inner text(only shows visible content )

diffrence is inner interHTML will render the tag (hidden things agar hoga text nhi
aygea)

textCotent will print tag as it is it will treat wverything as tag

---Adding New Element /Content using js

--------------------------------------- let x=
docuent.createElement('span')

.appendChild(x)

---------------------------------------
How to create a text node

let mypara=document.createElement('p');
mypara.textContent="i am the text"

.appendChild(mypara);

insertAdjacentHTML() - it has to be called with two argument

location-beforebegin,afterbegin, beforerend, afterend

and what to insert

REMOVE --------------->

removeChild()

parent elemnt and child whomoe ou want to remove

another way

parent =child.parent
child.parent.remove()

__________________________________________________________--

Chnages in CSS using js

1--> .style can modife only one css properties

2-->cssText like content.style.cssText='color:green; background-color:yello;';

3-->setAttrihut("styel","color:green; background-color:yello;");

id v change kar sakte hain

4--->className---->

5--->classList it return array of class object

add ,remove ,toggel,conatins

-------------------------------------------------------------
 part 2

Browser Events
--------------
like click scroll

monitorEvents(document) we can see all the events

unmonitorEvents

eventTarget top level interface (Bllue Print)(No parent ) all elements comes under
this .
recive event and apply listner

addEventListner()
removeEventListner()
dispatcherEvent()

evenTerget<-Node<-Element
see calls 2 notes

2- RemoveEventLister()--->

same event target event type same function hone se remove event listner kaam karga

function handleClickEvent() {
console.log("Button was clicked!");
}

// Step 2: Get the button element by its ID

const buttonElement = document.getElementById("myButton");

// Step 3: Add the event listener

buttonElement.addEventListener("click", handleClickEvent);

// Step 4: Remove the event listener

buttonElement.removeEventListener("click", handleClickEvent);

by defalut bubling pahse mai lagta hai

Phases Of an Event--->
-------------------
-->Capturing phase idhar find kar te hain ki lind find p then after i get there it
is called at target phase
phir wapas jan ke jese aye the usko bol te bubbling pahse

buttonElement.addEventListener("click", handleClickEvent,true);
it will activate the capturing pahse
Understanding the Use of Event Phases
Capturing Phase:

What it is: The capturing phase is when the event travels from the top of the DOM
tree (like the document) down to the target element that triggered the event.
Why it matters: This phase allows you to intercept events before they reach the
target element. You might want to do this for validation or to prevent the event
from happening under certain conditions.
Use Case: Suppose you have a dropdown menu that should close when clicking outside
of it. You can listen for clicks on the document during the capturing phase to
determine whether the click occurred inside or outside the dropdown.
Bubbling Phase:

What it is: The bubbling phase occurs after the target element has been activated.
The event travels back up the DOM tree from the target element to the document.
Why it matters: This phase allows parent elements to respond to events triggered by
their child elements. It makes event delegation possible, where a single event
listener can handle events for multiple child elements.
Use Case: If you have a list of items, you can attach a single click event listener
to the parent list. This way, you can handle clicks on any item without adding an
event listener to each individual item.

---------------------------------
The Event Object ->whne an event occurs addeventlistner ko event object milta hai
uske andar lot of event inforamation hota hia

buttonElement.addEventListener("click", function(event));

---------------------------------

The Default Action --->

anchor tag ->oprn the link in browser we can stp that using

preventDefault()

Avoid too many Events--->

nodeName

DOM Content loaded evnt hai isse pata chalta hai ki dom load ho chuka hai

---------------------------------
Class 3

Performance
1->measure speed of code
2->how to write efficent and performing code
3-> event loop

performance.now it provide a timestamp

agar multiple time dom update hota hai to we can use Doc Fragment to make it
efficent
Document Fragment -->light weigth doument object

isepe na hi reflow hota hia na hi repaint

fragment mai ko documnet mai add hoga tab reflow and reaint hoga

document.createDoumentFragment()

-------------------------------------------------------------
THe Call Stacck-keep track of functtion
js is single threaded lang hai (processing of one cmd at a time )

observation
1-run to complition
2-js does not execute multiple lines/funuction at the same time

-------------------------------------------------------------
EventLoop----------------------------------------------------

code:-
1-console.log('hi')
2-addevent listner -->it will handover this function to browser then agar click hua
to ye event queue mai jayega phir ye queue dekeh ga ki call stack khali hai ki nhi
agar hai to execute hoga nhi to wait
3-console.log('by')

LOUPE -PHILIP Robout

Asyn code use Js event loop to execute

asyn code handel by browseer

setTimeout( function(){console.log('f')},4000) it takes function and time after

which it will run
4000 min time ,iske baad v aur time lagega agar call stack empty nhi hua ho to

-------------------------------------------------------------
Class 4

API-> it act a mediator .its use to communicate between frontend and backend

Features of asyn code --->

better error handling

clean and cocise code

Promise ->koi v chiz parallel execute kar na chahte ho background mai

asyn code complte hua ki fail hua promise bata ta hai
asyn code rerurn proise

let meraPromise=new Promise(function(resolve,reject){

});

reslove hogya matlab fulfiled promise

reject hua to error throw kar dena and handel kar dena

----------->fulfilled->
|
promise----------
| |
| |
----------->reject->

promise have two methoed

promise khatam hone ke baad kuch aur kar na hot ahia to then use kiya jata hai
then() which is use the value returned by reslove function
it also used to know if the promise complte or not and then use 'then' to do more
work like start next promise etc
catch() is use to handel error

promise chaining se bachne keliye for code optimization

asyn hamesh promise return kar ta hai

Asysn await use kar te hain

fetch api returns a promise

fectch(,options)

-------------------------------------------------------------
Clouseres-A closure in JavaScript is a function that "remembers" the environment in
which it was created, even after that environment no longer exists. This allows an
inner function to access variables from its outer function's scope, even after the
outer function has finished execution.

ismai reference save hota hai copy nhi

Closure is created when a function is defined inside another function and the inner
function references variables from the outer function.