JavaScript DOM & Events
Roman Urdu me Professional
Presentation
Definitions, Usage, Examples
[Link]()
• Definition:
• Ye method element me naya CSS class add
karta hai.
• Usage:
• Dynamic styling ke liye use hota hai.
• JavaScript Example:
• const box = [Link]('.box');
[Link]()
• Definition:
• Element se CSS class remove karta hai.
• Usage:
• Style ya effect hatane ke liye.
• JavaScript Example:
• [Link]('active');
[Link]()
• Definition:
• Agar class ho to hata deta hai warna add karta
hai.
• Usage:
• Dark mode jese features ke liye.
• JavaScript Example:
• [Link]('dark');
appendChild()
• Definition:
• Parent ke end me child element add karta hai.
• Usage:
• Naya element insert karne ke liye.
• JavaScript Example:
• [Link](child);
append()
• Definition:
• Multiple elements ya text add karta hai.
• Usage:
• Modern aur flexible approach.
• JavaScript Example:
• [Link](child, 'Hello');
prepend()
• Definition:
• Element ko parent ke start me add karta hai.
• Usage:
• Top position par insert karne ke liye.
• JavaScript Example:
• [Link](child);
insertBefore()
• Definition:
• Element ko kisi specific element se pehle add
karta hai.
• Usage:
• Custom positioning ke liye.
• JavaScript Example:
• [Link](newNode, refNode);
insertAdjacentHTML()
• Definition:
• HTML directly DOM me insert karta hai.
• Usage:
• Fast HTML rendering ke liye.
• JavaScript Example:
• [Link]('beforeend','<p>Text<
/p>');
replaceChild()
• Definition:
• Purane child ko naye child se replace karta hai.
• Usage:
• Content update karne ke liye.
• JavaScript Example:
• [Link](newNode, oldNode);
removeChild()
• Definition:
• Parent se child element remove karta hai.
• Usage:
• Delete functionality ke liye.
• JavaScript Example:
• [Link](child);
[Link]()
• Definition:
• Element khud ko DOM se remove karta hai.
• Usage:
• Simple delete approach.
• JavaScript Example:
• [Link]();
[Link]()
• Definition:
• Form ke sare fields reset karta hai.
• Usage:
• Submission ke baad use hota hai.
• JavaScript Example:
• [Link]();
[Link]()
• Definition:
• Form programmatically submit karta hai.
• Usage:
• Validation ke baad submit ke liye.
• JavaScript Example:
• [Link]();
Input Event
• Definition:
• Input change hone par trigger hota hai.
• Usage:
• Live validation ke liye.
• JavaScript Example:
• [Link]('input',()=>{});
focus / blur
• Definition:
• Focus click par aur blur leave par hota hai.
• Usage:
• User experience improve karta hai.
• JavaScript Example:
• [Link]('focus',()=>{});
load / scroll
• Definition:
• Load page load par, scroll scrolling par hota
hai.
• Usage:
• Lazy loading & animations.
• JavaScript Example:
• [Link]('scroll',()=>{});
[Link]
• Definition:
• Actual element return karta hai jis par event
hua.
• Usage:
• Event delegation ke liye.
• JavaScript Example:
• [Link]([Link]);
[Link]
• Definition:
• Wo element return karta jahan listener laga
ho.
• Usage:
• Confusion avoid karta hai.
• JavaScript Example:
• [Link]([Link]);
setTimeout()
• Definition:
• Delay ke baad code run karta hai.
• Usage:
• Timers aur animation me use hota hai.
• JavaScript Example:
• setTimeout(()=>{},1000);
Fetch API
• Definition:
• Server se data lane ke liye.
• Usage:
• Modern AJAX alternative.
• JavaScript Example:
• fetch(url).then(r=>[Link]());