JavaScript DOM Manipulation

This repository contains examples, concepts, and mini-projects to learn DOM (Document Object Model) manipulation in JavaScript.
It covers everything from selecting elements to handling events, creating dynamic web interfaces, and advanced DOM concepts that are essential for modern frontend development.

---

🎤 Interview Preparation

• INTERVIEW_QUESTIONS.md: A comprehensive guide to DOM manipulation interview questions, from basic to advanced levels.

---

📚 Topics & Concepts

1. DOM Selectors

• getElementById, getElementsByClassName, getElementsByTagName
• querySelector, querySelectorAll
• matches() and closest() for advanced element matching
• Difference between live collections (getElementsByClassName) vs static NodeList (querySelectorAll)

2. DOM Traversing

• Parent / child / sibling navigation: parentNode, children, firstChild, lastChild, nextElementSibling, previousElementSibling
• childNodes vs children
• Traversing nested elements using loops and recursion

3. DOM Manipulation

• Text & content: innerHTML, textContent, innerText
• Attributes: getAttribute, setAttribute, removeAttribute
• Classes: classList.add/remove/toggle/contains
• Styles: element.style, computed styles with getComputedStyle()

4. Event Handling & Event Delegation

• Event listeners: addEventListener, removeEventListener
• Mouse events: click, dblclick, mouseover, mouseout, contextmenu
• Keyboard events: keydown, keyup, keypress
• Form events: submit, input, change, focus, blur
• Event propagation: bubbling vs capturing
• Event delegation for dynamically created elements

5. Creating, Inserting & Removing Elements

• createElement, appendChild, insertBefore, replaceChild
• Removing elements: remove(), removeChild()
• Cloning elements: cloneNode(true/false)
• Using document fragments for optimized DOM updates

6. Forms & Input Handling

• Accessing form elements: form.elements, value
• Validation: required fields, regex patterns, custom error messages
• Prevent default submission: event.preventDefault()
• Controlled input patterns (similar to React forms)

7. DOM Storage Integration

• localStorage & sessionStorage usage
• Saving user data and rendering dynamically
• Using JSON methods: JSON.stringify & JSON.parse

8. Animations & Transitions

• Adding/removing classes for CSS animations
• Simple JavaScript animations with setInterval, requestAnimationFrame
• Smooth transitions: slide, fade, expand/collapse

9. Advanced Concepts

• Shadow DOM: encapsulated DOM for reusable components
• MutationObserver: track DOM changes dynamically
• Template & cloning: template element + cloneNode
• Custom events: new CustomEvent() and dispatching events
• Performance: minimizing reflows & repaints

---

� Directory Structure

 ├── 📁 advanced
 │ ├── 📄 app.css
 │ ├── 📄 custom-events.js
 │ ├── 📄 error-boundaries.js
 │ ├── 📄 event-bubbling.js
 │ ├── 📄 index.html
 │ ├── 📄 mutation-observer.js
 │ ├── 📄 performance-optimization.js
 │ ├── 📄 shadow-dom.js
 │ └── 📄 templates-cloning.js
 ├── 📁 animations
 │ ├── 📄 app.css
 │ ├── 📄 css-animations.js
 │ ├── 📄 index.html
 │ └── 📄 js-animations.js
 ├── 📁 creating-removing
 │ ├── 📄 app.css
 │ ├── 📄 create-insert.js
 │ ├── 📄 fragments-cloning.js
 │ ├── 📄 index.html
 │ └── 📄 remove-replace.js
 ├── 📁 events
 │ ├── 📄 app.css
 │ ├── 📄 bubbling-capturing.js
 │ ├── 📄 event-delegation.js
 │ ├── 📄 form-events.js
 │ ├── 📄 index.html
 │ └── 📄 mouse-keyboard.js
 ├── 📁 forms
 │ ├── 📄 app.css
 │ ├── 📄 form-handling.js
 │ ├── 📄 index.html
 │ └── 📄 validation.js
 ├── 📁 manipulation
 │ ├── 📄 app.css
 │ ├── 📄 attributes-classes.js
 │ ├── 📄 index.html
 │ ├── 📄 styles.js
 │ └── 📄 text-content.js
 ├── 📁 projects
 │ ├── 📄 app.css
 │ ├── 📄 index.html
 │ └── 📄 index.js
 ├── 📁 selectors
 │ ├── 📄 advanced-selectors.js
 │ ├── 📄 app.css
 │ ├── 📄 basic-selectors.js
 │ ├── 📄 index.html
 │ └── 📄 live-vs-static.js
 ├── 📁 storage
 │ ├── 📄 app.css
 │ ├── 📄 index.html
 │ └── 📄 local-session-storage.js
 ├── 📁 styling
 │ ├── 📄 app.css
 │ ├── 📄 index.html
 │ └── 📄 index.js
 ├── 📁 traversing
 │ ├── 📄 app.css
 │ ├── 📄 index.html
 │ ├── 📄 nested-traversal.js
 │ └── 📄 traversal-basics.js
 └── 📝 README.md

�🚀 Mini Projects / Exercises

• Todo List App: Add, edit, delete tasks dynamically, with localStorage
• Modal / Popup Component: Open/close modal on button click
• Counter App: Increment/decrement values with buttons
• Tabs / Accordions / Carousels
• Form Wizard / Multi-Step Form
• Image Gallery: Dynamically add/remove images and filter
• Drag & Drop Functionality

---

⚡ Tips for Practice

1. Start with selectors, traversal, and event handling.
2. Build small projects step by step.
3. Gradually add forms, storage, animations, and advanced topics.
4. Try to recreate UI components from popular websites using only vanilla JS.
5. Practice writing clean, reusable functions for DOM manipulation — it helps a lot in frameworks like React or Next.js.

---