JavaScript DOM & Events
Definitions, Usage & Examples
[Link]()
• Definition:
• Adds one or more CSS classes to an element.
• Usage:
• Used to apply styles dynamically.
• Example:
• [Link]('active');
[Link]()
• Definition:
• Removes one or more CSS classes from an
element.
• Usage:
• Used to remove applied styles.
• Example:
• [Link]('active');
[Link]()
• Definition:
• Adds a class if missing, removes it if present.
• Usage:
• Used for toggle behavior like dark mode.
• Example:
• [Link]('dark');
appendChild()
• Definition:
• Adds a node as the last child of a parent.
• Usage:
• Used to insert elements.
• Example:
• [Link](child);
append()
• Definition:
• Adds multiple nodes or text.
• Usage:
• Modern alternative to appendChild.
• Example:
• [Link](child, 'text');
prepend()
• Definition:
• Adds node at the beginning.
• Usage:
• Used to insert at start.
• Example:
• [Link](child);
insertBefore()
• Definition:
• Inserts node before another node.
• Usage:
• Used for custom placement.
• Example:
• [Link](newNode, refNode);
insertAdjacentHTML()
• Definition:
• Inserts HTML at specific positions.
• Usage:
• Used for fast HTML insertion.
• Example:
• [Link]('beforeend','<p>Hi<
/p>');
replaceChild()
• Definition:
• Replaces an existing child node.
• Usage:
• Used to swap elements.
• Example:
• [Link](newNode, oldNode);
removeChild()
• Definition:
• Removes a child node.
• Usage:
• Used to delete elements.
• Example:
• [Link](child);
[Link]()
• Definition:
• Removes element itself.
• Usage:
• Simpler delete method.
• Example:
• [Link]();
[Link]()
• Definition:
• Resets all form fields.
• Usage:
• Used after submission.
• Example:
• [Link]();
[Link]()
• Definition:
• Submits the form programmatically.
• Usage:
• Used in validations.
• Example:
• [Link]();
Input Events
• Definition:
• Triggered when input changes.
• Usage:
• Used for live validation.
• Example:
• [Link]('input',()=>{});
focus / blur
• Definition:
• Focus triggers on click, blur on leave.
• Usage:
• Used for UX.
• Example:
• [Link]('focus',()=>{});
load / scroll
• Definition:
• Load runs after page load, scroll on scrolling.
• Usage:
• Used for lazy loading.
• Example:
• [Link]('scroll',()=>{});
[Link]
• Definition:
• Returns element that triggered event.
• Usage:
• Used for delegation.
• Example:
• [Link]([Link]);
[Link]
• Definition:
• Returns element with event listener.
• Usage:
• Avoids confusion.
• Example:
• [Link]([Link]);
setTimeout()
• Definition:
• Runs code after delay.
• Usage:
• Used for timers.
• Example:
• setTimeout(()=>{},1000);
Fetch API
• Definition:
• Used to make HTTP requests.
• Usage:
• Modern AJAX.
• Example:
• fetch(url).then(r=>[Link]());
