Javascript · Question Set

DOM Manipulation and Events – Javascript interview questions

DOM Manipulation and Events interview questions for placements and exams.

Subject: JavascriptDifficulty: Mixed12 questions in this set

Set overview

Questions

Included in this set

Subject

Javascript

Explore more sets

Difficulty

Mixed

Level of this set

Javascript – DOM Manipulation and Events questions (12)

Go through each question and its explanation. Use this set as a focused practice pack for Javascript.

Back to Javascript subject page

1. What is the correct way to prevent form submission?

Difficulty: MediumType: MCQTopic: DOM Forms

Event.preventDefault stops the default action of an event. For forms, it prevents page reload on submission. Call preventDefault in the submit event handler. This allows you to validate data and submit via AJAX instead. Return false works in inline HTML but is not recommended. It also stops propagation, which may not be intended. Preventing default is essential for modern web applications that handle forms with JavaScript. You can also prevent default on links, context menus, and other events. Understanding preventDefault is crucial for controlling browser behavior.

Example code

const form = document.getElementById('myForm');

// PREVENT FORM SUBMISSION

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Stop page reload
  
  console.log('Form submitted');
  
  // Get form data
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  console.log(data);
  
  // Validate and send via AJAX
  if (validateForm(data)) {
    submitForm(data);
  }
});

// FORM VALIDATION

function validateForm(data) {
  const errors = [];
  
  if (!data.username || data.username.trim().length < 3) {
    errors.push('Username must be at least 3 characters');
  }
  
  if (!data.email || !data.email.includes('@')) {
    errors.push('Invalid email');
  }
  
  if (!data.password || data.password.length < 8) {
    errors.push('Password must be at least 8 characters');
  }
  
  if (errors.length > 0) {
    displayErrors(errors);
    return false;
  }
  
  return true;
}

// ACCESSING FORM DATA

// Method 1: FormData API
const formData = new FormData(form);
console.log(formData.get('username'));
console.log(formData.get('email'));

// Convert to object
const dataObj = Object.fromEntries(formData);
console.log(dataObj); // {username: '...', email: '...'}

// Method 2: Direct access
const username = form.elements.username.value;
const email = form.elements.email.value;

// Method 3: querySelector
const username2 = form.querySelector('input[name="username"]').value;

// REAL-TIME VALIDATION

const emailInput = document.getElementById('email');
const emailError = document.getElementById('emailError');

emailInput.addEventListener('blur', () => {
  if (!emailInput.value.includes('@')) {
    emailError.textContent = 'Invalid email';
    emailInput.classList.add('error');
  } else {
    emailError.textContent = '';
    emailInput.classList.remove('error');
  }
});

// Clear error on input
emailInput.addEventListener('input', () => {
  emailError.textContent = '';
  emailInput.classList.remove('error');
});

// PASSWORD STRENGTH INDICATOR

const passwordInput = document.getElementById('password');
const strengthMeter = document.getElementById('strength');

passwordInput.addEventListener('input', () => {
  const password = passwordInput.value;
  let strength = 'Weak';
  
  if (password.length >= 8) {
    strength = 'Medium';
  }
  if (password.length >= 12 && /[A-Z]/.test(password) && /[0-9]/.test(password)) {
    strength = 'Strong';
  }
  
  strengthMeter.textContent = strength;
  strengthMeter.className = strength.toLowerCase();
});

// SUBMIT VIA AJAX

async function submitForm(data) {
  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });
    
    if (response.ok) {
      showSuccess('Form submitted successfully!');
      form.reset();
    } else {
      showError('Submission failed');
    }
  } catch (error) {
    showError('Network error');
  }
}

// RESET FORM

const resetBtn = document.getElementById('resetBtn');

resetBtn.addEventListener('click', () => {
  form.reset(); // Clear all fields
  clearErrors();
});

// PREVENT MULTIPLE SUBMISSIONS

let isSubmitting = false;

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  
  if (isSubmitting) return; // Prevent double submit
  
  isSubmitting = true;
  const submitBtn = form.querySelector('button[type="submit"]');
  submitBtn.disabled = true;
  submitBtn.textContent = 'Submitting...';
  
  await submitForm(new FormData(form));
  
  isSubmitting = false;
  submitBtn.disabled = false;
  submitBtn.textContent = 'Submit';
});

// FILE INPUT HANDLING

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const files = event.target.files;
  
  if (files.length > 0) {
    const file = files[0];
    console.log('File:', file.name);
    console.log('Size:', file.size);
    console.log('Type:', file.type);
    
    // Validate file
    if (file.size > 5 * 1024 * 1024) {
      alert('File too large (max 5MB)');
      fileInput.value = '';
    }
  }
});

2. What is localStorage in JavaScript?

Difficulty: EasyType: MCQTopic: Web Storage

LocalStorage is a web storage API that stores key-value pairs in the browser. Data persists even after closing the browser. Data is stored as strings. Use JSON.stringify to store objects and JSON.parse to retrieve them. Storage limit is about 5 to 10 MB depending on browser. Data is accessible only to the same origin. LocalStorage is synchronous and blocks the main thread. SessionStorage is similar but clears on browser close. Use localStorage for user preferences, settings, and non-sensitive data. Never store sensitive information like passwords. Understanding browser storage is essential for creating stateful web applications.

Example code

// SET ITEM

localStorage.setItem('username', 'John');
localStorage.setItem('theme', 'dark');

// GET ITEM

const username = localStorage.getItem('username');
console.log(username); // 'John'

const theme = localStorage.getItem('theme');
console.log(theme); // 'dark'

// Non-existent key returns null
const missing = localStorage.getItem('missing');
console.log(missing); // null

// REMOVE ITEM

localStorage.removeItem('username');

// CLEAR ALL

localStorage.clear(); // Removes everything

// STORE OBJECTS (must stringify)

const user = {
  name: 'John',
  age: 30,
  preferences: { theme: 'dark' }
};

// Store
localStorage.setItem('user', JSON.stringify(user));

// Retrieve
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 'John'

// STORE ARRAY

const items = ['apple', 'banana', 'orange'];
localStorage.setItem('items', JSON.stringify(items));

const retrievedItems = JSON.parse(localStorage.getItem('items'));
console.log(retrievedItems); // ['apple', 'banana', 'orange']

// CHECK IF KEY EXISTS

if (localStorage.getItem('username') !== null) {
  console.log('Username exists');
}

// GET ALL KEYS

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

// HELPER FUNCTIONS

// Safe get with default
function getFromStorage(key, defaultValue = null) {
  const value = localStorage.getItem(key);
  if (value === null) return defaultValue;
  
  try {
    return JSON.parse(value);
  } catch {
    return value;
  }
}

// Safe set
function setInStorage(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (error) {
    console.error('Storage error:', error);
    return false;
  }
}

// PRACTICAL EXAMPLES

// Dark mode toggle
const toggleBtn = document.getElementById('themeToggle');

// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.classList.add(savedTheme);

toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  const newTheme = document.body.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem('theme', newTheme);
});

// Save form progress
const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, textarea');

// Save on input
inputs.forEach(input => {
  // Load saved value
  const saved = localStorage.getItem(input.name);
  if (saved) input.value = saved;
  
  // Save on change
  input.addEventListener('input', () => {
    localStorage.setItem(input.name, input.value);
  });
});

// Clear on submit
form.addEventListener('submit', () => {
  inputs.forEach(input => {
    localStorage.removeItem(input.name);
  });
});

// Shopping cart

function addToCart(item) {
  const cart = JSON.parse(localStorage.getItem('cart')) || [];
  cart.push(item);
  localStorage.setItem('cart', JSON.stringify(cart));
}

function getCart() {
  return JSON.parse(localStorage.getItem('cart')) || [];
}

function clearCart() {
  localStorage.removeItem('cart');
}

// STORAGE EVENT (listen for changes in other tabs)

window.addEventListener('storage', (event) => {
  console.log('Storage changed!');
  console.log('Key:', event.key);
  console.log('Old value:', event.oldValue);
  console.log('New value:', event.newValue);
  console.log('URL:', event.url);
});

// SESSION STORAGE (clears on browser close)

sessionStorage.setItem('sessionData', 'value');
const sessionData = sessionStorage.getItem('sessionData');

// STORAGE LIMITS

try {
  // Test storage limit
  const testKey = 'test';
  const testValue = 'x'.repeat(10 * 1024 * 1024); // 10MB
  localStorage.setItem(testKey, testValue);
} catch (error) {
  console.error('Storage quota exceeded');
}

3. Explain event bubbling, capturing, and event delegation. Provide practical examples and use cases.

Difficulty: HardType: SubjectiveTopic: DOM Events

Events in JavaScript propagate through the DOM in three phases: capturing, target, and bubbling. Understanding this is crucial for effective event handling. Event capturing phase: Event travels from root down to target element. Window to document to body to parent to target. Use third parameter true in addEventListener. Rarely used in practice. Useful for intercepting events before they reach target. Target phase: Event reaches the actual target element. Target's event handlers execute. This is where the event originated. Bubbling phase: Event bubbles up from target to root. Most event handlers work in bubble phase. This is the default behavior. Target to parent to body to document to window. Event delegation pattern: Attach single listener to parent element. Handle events from multiple children. Check event.target to identify which child triggered event. More efficient than many individual listeners. Automatically works for dynamically added elements. Stopping propagation: Event.stopPropagation stops bubbling to parents. Event.stopImmediatePropagation stops other handlers on same element. Use sparingly as it can break delegation patterns. Event.target vs event.currentTarget: Target is the element that triggered the event, the innermost clicked element. CurrentTarget is the element with the listener attached, the element currently handling the event. During bubbling, target stays same but currentTarget changes. Practical use cases: Event delegation for lists and tables. Click outside to close dropdowns. Modal background click to close. Navigation menus. Dynamic form fields. Infinite scroll lists. Benefits of delegation: Better performance with fewer listeners. Less memory usage. Works with dynamic content. Cleaner code with centralized handling. Easier maintenance. When not to use delegation: Events that do not bubble like focus and blur. Need specific this binding for each element. Very specific single-element behavior. Performance-critical handlers on many elements. Understanding event propagation is essential for building efficient, maintainable event-driven applications.

Example code

// EVENT PROPAGATION PHASES

const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

// Capture phase (true parameter)
outer.addEventListener('click', () => {
  console.log('Outer CAPTURE');
}, true);

middle.addEventListener('click', () => {
  console.log('Middle CAPTURE');
}, true);

inner.addEventListener('click', () => {
  console.log('Inner CAPTURE');
}, true);

// Bubble phase (default)
outer.addEventListener('click', () => {
  console.log('Outer BUBBLE');
});

middle.addEventListener('click', () => {
  console.log('Middle BUBBLE');
});

inner.addEventListener('click', () => {
  console.log('Inner BUBBLE');
});

// When inner clicked, output:
// Outer CAPTURE
// Middle CAPTURE
// Inner CAPTURE
// Inner BUBBLE
// Middle BUBBLE
// Outer BUBBLE

// EVENT DELEGATION - Todo List

const todoList = document.getElementById('todoList');

// One listener for all todos
todoList.addEventListener('click', (event) => {
  const target = event.target;
  
  // Delete button clicked
  if (target.classList.contains('delete')) {
    const li = target.closest('li');
    li.remove();
  }
  
  // Checkbox clicked
  if (target.type === 'checkbox') {
    const li = target.closest('li');
    li.classList.toggle('completed');
  }
  
  // Edit button clicked
  if (target.classList.contains('edit')) {
    const li = target.closest('li');
    const span = li.querySelector('.text');
    span.contentEditable = true;
    span.focus();
  }
});

// Add todos dynamically (delegation handles them automatically)
function addTodo(text) {
  const li = document.createElement('li');
  li.innerHTML = `
    <input type="checkbox">
    <span class="text">${text}</span>
    <button class="edit">Edit</button>
    <button class="delete">Delete</button>
  `;
  todoList.appendChild(li);
}

// EVENT DELEGATION - Table

const table = document.getElementById('dataTable');

table.addEventListener('click', (event) => {
  const target = event.target;
  
  // Find the row (even if clicked on cell)
  const row = target.closest('tr');
  
  if (row && row.dataset.id) {
    console.log('Row clicked:', row.dataset.id);
    
    // Check which column
    const cell = target.closest('td');
    if (cell) {
      const columnIndex = cell.cellIndex;
      console.log('Column:', columnIndex);
      
      // Handle specific columns
      if (columnIndex === 3) { // Actions column
        if (target.classList.contains('edit')) {
          editRow(row.dataset.id);
        }
        if (target.classList.contains('delete')) {
          deleteRow(row.dataset.id);
        }
      }
    }
  }
});

// CLICK OUTSIDE TO CLOSE

const dropdown = document.getElementById('dropdown');
const button = document.getElementById('dropdownBtn');

// Open dropdown
button.addEventListener('click', (event) => {
  event.stopPropagation(); // Don't trigger document listener
  dropdown.classList.add('open');
});

// Close when clicking outside
document.addEventListener('click', (event) => {
  if (!dropdown.contains(event.target)) {
    dropdown.classList.remove('open');
  }
});

// Don't close when clicking inside dropdown
dropdown.addEventListener('click', (event) => {
  event.stopPropagation();
});

// MODAL WITH EVENT DELEGATION

const modal = document.getElementById('modal');
const modalContent = modal.querySelector('.modal-content');

// Close on background click
modal.addEventListener('click', (event) => {
  // Only close if clicked directly on modal, not children
  if (event.target === modal) {
    closeModal();
  }
});

// Alternative: check if clicked outside content
modal.addEventListener('click', (event) => {
  if (!modalContent.contains(event.target)) {
    closeModal();
  }
});

// NAVIGATION MENU

const nav = document.getElementById('nav');

nav.addEventListener('click', (event) => {
  const link = event.target.closest('a');
  
  if (link) {
    // Check if has submenu
    const parent = link.parentElement;
    if (parent.querySelector('.submenu')) {
      event.preventDefault();
      parent.classList.toggle('open');
    }
  }
});

// FORM WITH DELEGATION

const form = document.getElementById('dynamicForm');

// Handle all inputs with delegation
form.addEventListener('input', (event) => {
  const input = event.target;
  
  if (input.type === 'email') {
    validateEmail(input);
  }
  if (input.type === 'password') {
    validatePassword(input);
  }
  if (input.hasAttribute('data-validate')) {
    validateField(input);
  }
});

// Handle all buttons
form.addEventListener('click', (event) => {
  if (event.target.matches('.add-field')) {
    addField();
  }
  if (event.target.matches('.remove-field')) {
    event.target.closest('.field').remove();
  }
});

// PERFORMANCE COMPARISON

// Bad: Many listeners (memory intensive)
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', handleClick);
});
// If 1000 items = 1000 listeners!

// Good: One listener with delegation
const container = document.getElementById('container');
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('item')) {
    handleClick(event);
  }
});
// Only 1 listener for 1000 items!

// STOPPING PROPAGATION

inner.addEventListener('click', (event) => {
  console.log('Inner');
  event.stopPropagation(); // Stops bubbling
  // Outer handlers won't fire
});

// Stop other handlers on same element
button.addEventListener('click', (event) => {
  console.log('First');
  event.stopImmediatePropagation();
});

button.addEventListener('click', () => {
  console.log('Second'); // Won't execute
});

4. What is the correct way to create and add an element to the DOM?

Difficulty: EasyType: MCQTopic: DOM Basics

The proper way is to create an element with createElement, configure it, then add it to the DOM with appendChild or append. CreateElement creates a new element node. You then set its properties, attributes, and content. Finally, append it to a parent element to make it visible. AppendChild is the traditional method that adds one node. Append is newer and can add multiple nodes and text at once. This approach is safer and more efficient than innerHTML for adding elements. It avoids parsing HTML and potential XSS issues. You can also use insertBefore, insertAdjacentElement, or replaceChild for different insertion needs. Understanding element creation is fundamental to dynamic web pages.

Example code

// CREATE ELEMENT

const div = document.createElement('div');
console.log(div); // <div></div> (not in DOM yet)

// Set properties
div.id = 'myDiv';
div.className = 'container';
div.textContent = 'Hello World';

// Set attributes
div.setAttribute('data-id', '123');
div.setAttribute('title', 'Tooltip');

// Add styles
div.style.color = 'blue';
div.style.padding = '10px';

// ADD TO DOM with appendChild
document.body.appendChild(div);
// Now visible in page

// CREATE COMPLEX ELEMENT

const card = document.createElement('div');
card.className = 'card';

const title = document.createElement('h3');
title.textContent = 'Card Title';

const text = document.createElement('p');
text.textContent = 'Card description';

const button = document.createElement('button');
button.textContent = 'Click Me';
button.addEventListener('click', () => {
  console.log('Button clicked');
});

// Assemble
card.appendChild(title);
card.appendChild(text);
card.appendChild(button);

// Add to page
document.body.appendChild(card);

// APPEND VS APPENDCHILD

const container = document.getElementById('container');

// appendChild - one node only, returns appended node
const p1 = document.createElement('p');
p1.textContent = 'Paragraph 1';
container.appendChild(p1);

// append - multiple nodes and text, returns undefined
const p2 = document.createElement('p');
p2.textContent = 'Paragraph 2';
container.append(p2, 'Some text', document.createElement('span'));

// PREPEND - add at beginning

const first = document.createElement('div');
first.textContent = 'First';
container.prepend(first); // Adds at start

// INSERT AT SPECIFIC POSITION

const reference = document.getElementById('reference');
const newElement = document.createElement('div');

// Insert before reference
reference.parentNode.insertBefore(newElement, reference);

// insertAdjacentElement
reference.insertAdjacentElement('beforebegin', newElement); // Before element
reference.insertAdjacentElement('afterbegin', newElement);  // First child
reference.insertAdjacentElement('beforeend', newElement);   // Last child
reference.insertAdjacentElement('afterend', newElement);    // After element

// REMOVING ELEMENTS

// Modern way
element.remove();

// Old way
parent.removeChild(element);

// REPLACING ELEMENTS

const oldElement = document.getElementById('old');
const newElement2 = document.createElement('div');
newElement2.textContent = 'New';

oldElement.replaceWith(newElement2); // Modern
oldElement.parentNode.replaceChild(newElement2, oldElement); // Old

// CLONING ELEMENTS

const original = document.getElementById('template');

// Shallow clone (no children)
const shallow = original.cloneNode(false);

// Deep clone (with children)
const deep = original.cloneNode(true);

// DOCUMENT FRAGMENT (efficient for multiple elements)

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const item = document.createElement('li');
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}

// Add all at once (one reflow instead of 100)
document.getElementById('list').appendChild(fragment);

// PRACTICAL EXAMPLE - Create card

function createCard(title, description) {
  const card = document.createElement('div');
  card.className = 'card';
  
  const heading = document.createElement('h3');
  heading.textContent = title;
  
  const para = document.createElement('p');
  para.textContent = description;
  
  card.append(heading, para);
  return card;
}

const myCard = createCard('Title', 'Description');
document.body.appendChild(myCard);

5. What is the difference between innerHTML, textContent, and innerText?

Difficulty: EasyType: MCQTopic: DOM Basics

InnerHTML gets or sets the HTML content including all tags. It parses HTML, so it is slower but more powerful. Use it when you need to insert HTML elements. TextContent gets or sets all text content without HTML parsing. It is faster and safer than innerHTML. It includes text from hidden elements and script tags. Use it for plain text to avoid XSS attacks. InnerText gets only visible text, respecting CSS styling. It triggers reflow, so it is the slowest. Hidden elements are excluded. It considers line breaks and formatting. For security, always use textContent for user input to prevent XSS. Use innerHTML only for trusted content. InnerText is useful when you need visible text only. Understanding these differences prevents security issues and performance problems.

Example code

const div = document.getElementById('demo');

// Assume: <div id="demo">Hello <span style="display:none">Hidden</span> <b>World</b></div>

// innerHTML - includes HTML tags
console.log(div.innerHTML);
// 'Hello <span style="display:none">Hidden</span> <b>World</b>'

// textContent - all text, no HTML
console.log(div.textContent);
// 'Hello Hidden World' (includes hidden text)

// innerText - visible text only
console.log(div.innerText);
// 'Hello World' (excludes hidden text)

// SETTING CONTENT

// innerHTML - can add HTML elements
div.innerHTML = '<p>New <strong>content</strong></p>';
// Creates actual <p> and <strong> elements

// textContent - adds as plain text
div.textContent = '<p>New content</p>';
// Displays literally: <p>New content</p>

// innerText - adds as plain text with formatting
div.innerText = 'Line 1\nLine 2';
// Respects line breaks

// SECURITY - XSS Attack Prevention

const userInput = '<img src=x onerror="alert(\'XSS\')"> ';

// UNSAFE - executes script!
// div.innerHTML = userInput; // Alert pops up!

// SAFE - displays as text
div.textContent = userInput;
// Shows: <img src=x onerror="alert('XSS')">

// PERFORMANCE

console.time('innerHTML');
for (let i = 0; i < 1000; i++) {
  div.innerHTML = 'Test';
}
console.timeEnd('innerHTML'); // Slowest (parses HTML)

console.time('textContent');
for (let i = 0; i < 1000; i++) {
  div.textContent = 'Test';
}
console.timeEnd('textContent'); // Fastest

console.time('innerText');
for (let i = 0; i < 1000; i++) {
  div.innerText = 'Test';
}
console.timeEnd('innerText'); // Slow (triggers reflow)

// PRACTICAL EXAMPLES

// Get form input safely
const username = document.getElementById('username').value;
document.getElementById('greeting').textContent = `Hello, ${username}`;
// Safe from XSS

// Insert HTML from template
const template = '<div class="card"><h3>Title</h3></div>';
document.getElementById('container').innerHTML = template;
// Use only for trusted content

// Get visible text for copying
const article = document.getElementById('article');
const visibleText = article.innerText;
// Excludes hidden content, good for copy function

6. What is event bubbling in JavaScript?

Difficulty: HardType: MCQTopic: DOM Events

Event bubbling is when an event triggered on a child element propagates up through its parent elements to the root. The event starts at the target element where it occurred. It then bubbles up through each ancestor element. Each ancestor's event handlers are triggered in order. Event capturing is the opposite, going from root down to target. Most events bubble, but some like focus and blur do not. You can stop bubbling with event.stopPropagation. This prevents the event from reaching parent elements. Event delegation uses bubbling to handle events on multiple children with one parent listener. Understanding bubbling is essential for event delegation and preventing unintended behavior.

Example code

// HTML structure:
// <div id="outer">
//   <div id="middle">
//     <button id="inner">Click</button>
//   </div>
// </div>

const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

// Add listeners to all three
outer.addEventListener('click', () => {
  console.log('Outer clicked');
});

middle.addEventListener('click', () => {
  console.log('Middle clicked');
});

inner.addEventListener('click', () => {
  console.log('Inner clicked');
});

// When button clicked, output:
// 'Inner clicked'
// 'Middle clicked'
// 'Outer clicked'
// Event bubbles from inner to outer!

// STOPPING PROPAGATION

inner.addEventListener('click', (event) => {
  console.log('Inner clicked');
  event.stopPropagation(); // Stop bubbling!
});
// Now only 'Inner clicked' appears

// EVENT PHASES

// 1. Capture phase (root to target)
outer.addEventListener('click', () => {
  console.log('Outer capture');
}, true); // true = capture phase

// 2. Target phase
inner.addEventListener('click', () => {
  console.log('Target');
});

// 3. Bubble phase (target to root)
outer.addEventListener('click', () => {
  console.log('Outer bubble');
}, false); // false = bubble phase (default)

// Output when inner clicked:
// 'Outer capture' (capture phase)
// 'Target' (target phase)
// 'Outer bubble' (bubble phase)

// EVENT DELEGATION

// Instead of adding listener to each item
const list = document.getElementById('list');

// Add one listener to parent
list.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Clicked:', event.target.textContent);
  }
});

// Works for dynamically added items too!
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
list.appendChild(newItem);
// Clicking new item works without adding listener!

// PRACTICAL EXAMPLE - Modal

const modal = document.getElementById('modal');
const modalContent = document.querySelector('.modal-content');
const closeBtn = document.querySelector('.close');

// Close modal when clicking outside
modal.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Don't close when clicking content
modalContent.addEventListener('click', (event) => {
  event.stopPropagation(); // Don't bubble to modal
});

// Close button
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// PREVENTING DEFAULT AND BUBBLING

const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  event.preventDefault(); // Don't follow link
  event.stopPropagation(); // Don't bubble
  console.log('Link clicked but not followed');
});

// event.stopImmediatePropagation()
// Stops other handlers on same element too

inner.addEventListener('click', (event) => {
  console.log('First handler');
  event.stopImmediatePropagation();
});

inner.addEventListener('click', () => {
  console.log('Second handler'); // Won't run
});

7. What is event.target vs event.currentTarget?

Difficulty: MediumType: MCQTopic: DOM Events

Event.target is the actual element that triggered the event. It is the innermost element that was clicked or interacted with. Event.currentTarget is the element that has the event listener attached. During bubbling, this is the current element processing the event. Target can be a child element, but currentTarget is always the element with the listener. This distinction is important for event delegation. Target can change during bubbling as different elements are processed. CurrentTarget always refers to the element with the listener. Use target to find what was actually clicked. Use currentTarget to reference the element with the handler. Understanding this difference is crucial for event delegation patterns.

Example code

// HTML:
// <div id="parent">
//   <button id="child">Click Me</button>
// </div>

const parent = document.getElementById('parent');

parent.addEventListener('click', function(event) {
  console.log('target:', event.target.id);
  console.log('currentTarget:', event.currentTarget.id);
});

// When clicking button:
// target: 'child' (button was clicked)
// currentTarget: 'parent' (listener is on parent)

// When clicking parent directly:
// target: 'parent'
// currentTarget: 'parent'
// (both same when clicking listener element)

// EVENT DELEGATION EXAMPLE

const list = document.getElementById('list');
// <ul id="list">
//   <li>Item 1</li>
//   <li>Item 2</li>
// </ul>

list.addEventListener('click', function(event) {
  console.log('Clicked:', event.target.textContent);
  console.log('Listener on:', event.currentTarget.id);
  
  // Check if clicked element is LI
  if (event.target.tagName === 'LI') {
    event.target.style.backgroundColor = 'yellow';
  }
});

// OTHER EVENT PROPERTIES

document.addEventListener('click', function(event) {
  console.log('Type:', event.type); // 'click'
  console.log('Target:', event.target);
  console.log('CurrentTarget:', event.currentTarget); // document
  console.log('Timestamp:', event.timeStamp);
  console.log('Bubbles:', event.bubbles); // true for most events
  console.log('Cancelable:', event.cancelable);
});

// MOUSE EVENT PROPERTIES

document.addEventListener('click', function(event) {
  console.log('ClientX:', event.clientX); // X relative to viewport
  console.log('ClientY:', event.clientY); // Y relative to viewport
  console.log('PageX:', event.pageX);     // X relative to document
  console.log('PageY:', event.pageY);     // Y relative to document
  console.log('ScreenX:', event.screenX); // X relative to screen
  console.log('ScreenY:', event.screenY); // Y relative to screen
  console.log('Button:', event.button);   // 0=left, 1=middle, 2=right
});

// KEYBOARD EVENT PROPERTIES

document.addEventListener('keydown', function(event) {
  console.log('Key:', event.key);         // 'a', 'Enter', etc.
  console.log('Code:', event.code);       // 'KeyA', 'Enter', etc.
  console.log('KeyCode:', event.keyCode); // Deprecated
  console.log('AltKey:', event.altKey);   // true if Alt pressed
  console.log('CtrlKey:', event.ctrlKey); // true if Ctrl pressed
  console.log('ShiftKey:', event.shiftKey);
});

// PRACTICAL EXAMPLE - Click outside to close

const dropdown = document.getElementById('dropdown');
const button = document.getElementById('dropdownBtn');

button.addEventListener('click', (event) => {
  event.stopPropagation();
  dropdown.classList.toggle('open');
});

document.addEventListener('click', (event) => {
  // If click is outside dropdown
  if (!dropdown.contains(event.target)) {
    dropdown.classList.remove('open');
  }
});

// FORM EVENTS

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Stop form submission
  console.log('Form submitted');
  console.log('Target:', event.target); // The <form> element
  
  // Get form data
  const formData = new FormData(event.target);
  console.log(formData.get('username'));
});

8. What is the classList property used for?

Difficulty: EasyType: MCQTopic: DOM Basics

The classList property provides methods to add, remove, toggle, and check CSS classes on elements. Add method adds one or more classes. Remove method removes classes. Toggle adds class if absent, removes if present. Contains checks if class exists. ClassList is better than className because it does not replace all classes. It works with multiple classes easily. It provides convenient methods. ClassName is a string of all classes, harder to manipulate. ClassList is a DOMTokenList with helpful methods. Using classList is the modern, recommended way to manage CSS classes. Understanding classList is essential for dynamic styling in JavaScript.

Example code

const element = document.getElementById('myElement');

// ADD classes
element.classList.add('active');
element.classList.add('highlight', 'special'); // Multiple at once

// REMOVE classes
element.classList.remove('active');
element.classList.remove('highlight', 'special');

// TOGGLE - add if absent, remove if present
element.classList.toggle('active'); // Adds
element.classList.toggle('active'); // Removes

// Toggle with condition
const isActive = true;
element.classList.toggle('active', isActive); // Adds if isActive is true

// CHECK if class exists
if (element.classList.contains('active')) {
  console.log('Element is active');
}

// REPLACE class
element.classList.replace('old-class', 'new-class');

// GET all classes as array
const classes = [...element.classList];
console.log(classes); // ['class1', 'class2']

// ITERATE over classes
element.classList.forEach(className => {
  console.log(className);
});

// LENGTH
console.log(element.classList.length); // Number of classes

// ITEM - get class by index
console.log(element.classList.item(0)); // First class

// COMPARE WITH className

// Using className (old way, harder)
element.className = 'class1 class2'; // Replaces all classes

if (element.className.includes('active')) {
  // Not reliable if 'active-button' exists
}

element.className += ' new-class'; // Add (awkward)
element.className = element.className.replace('old', 'new'); // Replace

// Using classList (modern, easier)
element.classList.add('new-class');
element.classList.replace('old', 'new');

// PRACTICAL EXAMPLES

// Toggle menu
const menuBtn = document.getElementById('menuBtn');
const menu = document.getElementById('menu');

menuBtn.addEventListener('click', () => {
  menu.classList.toggle('open');
});

// Active tab
const tabs = document.querySelectorAll('.tab');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // Remove active from all
    tabs.forEach(t => t.classList.remove('active'));
    // Add to clicked
    tab.classList.add('active');
  });
});

// Dark mode toggle
const toggleBtn = document.getElementById('darkModeToggle');

toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  
  // Update button text
  const isDark = document.body.classList.contains('dark-mode');
  toggleBtn.textContent = isDark ? 'Light Mode' : 'Dark Mode';
});

// Loading state
const button = document.getElementById('submitBtn');

button.addEventListener('click', async () => {
  button.classList.add('loading');
  button.disabled = true;
  
  await fetchData(); // Async operation
  
  button.classList.remove('loading');
  button.disabled = false;
});

// Highlight on scroll
window.addEventListener('scroll', () => {
  const sections = document.querySelectorAll('section');
  
  sections.forEach(section => {
    const top = section.offsetTop;
    const height = section.offsetHeight;
    
    if (window.scrollY >= top - 100 && window.scrollY < top + height) {
      section.classList.add('active');
    } else {
      section.classList.remove('active');
    }
  });
});

9. What is event delegation and why is it useful?

Difficulty: MediumType: MCQTopic: DOM Events

Event delegation is attaching a single event listener to a parent element to handle events from its children using event bubbling. Instead of adding listeners to many child elements, you add one listener to the parent. When a child is clicked, the event bubbles up to the parent. Benefits include better performance with fewer event listeners, automatic handling of dynamically added elements, and less memory usage. You check event.target to determine which child triggered the event. Then handle it accordingly based on the target. Event delegation is a fundamental pattern in JavaScript, especially for lists and dynamic content. Understanding delegation shows advanced knowledge of events and DOM manipulation.

Example code

// WITHOUT EVENT DELEGATION (bad for many elements)

const items = document.querySelectorAll('.item');

items.forEach(item => {
  item.addEventListener('click', () => {
    console.log('Item clicked');
  });
});
// Problems:
// - 100 items = 100 event listeners (memory!)
// - Doesn't work for dynamically added items

// WITH EVENT DELEGATION (efficient)

const list = document.getElementById('list');

list.addEventListener('click', (event) => {
  // Check if clicked element is an item
  if (event.target.classList.contains('item')) {
    console.log('Item clicked:', event.target.textContent);
  }
});
// Benefits:
// - One listener for all items
// - Works for items added later
// - Better performance

// PRACTICAL EXAMPLE - Todo List

const todoList = document.getElementById('todoList');

todoList.addEventListener('click', (event) => {
  const target = event.target;
  
  // Handle delete button
  if (target.classList.contains('delete-btn')) {
    target.parentElement.remove();
  }
  
  // Handle checkbox
  if (target.type === 'checkbox') {
    target.parentElement.classList.toggle('completed');
  }
  
  // Handle edit button
  if (target.classList.contains('edit-btn')) {
    const li = target.parentElement;
    const text = li.querySelector('.text');
    text.contentEditable = true;
    text.focus();
  }
});

// Add new items dynamically
function addTodo(text) {
  const li = document.createElement('li');
  li.innerHTML = `
    <input type="checkbox">
    <span class="text">${text}</span>
    <button class="edit-btn">Edit</button>
    <button class="delete-btn">Delete</button>
  `;
  todoList.appendChild(li);
  // No need to add event listeners!
}

// ADVANCED DELEGATION - Multiple event types

const container = document.getElementById('container');

// Handle multiple events on parent
container.addEventListener('click', handleClick);
container.addEventListener('dblclick', handleDoubleClick);
container.addEventListener('contextmenu', handleRightClick);

function handleClick(event) {
  if (event.target.matches('.button')) {
    console.log('Button clicked');
  }
}

function handleDoubleClick(event) {
  if (event.target.matches('.item')) {
    console.log('Item double clicked');
  }
}

function handleRightClick(event) {
  if (event.target.matches('.card')) {
    event.preventDefault();
    showContextMenu(event);
  }
}

// CHECKING TARGET ELEMENT

// Method 1: classList.contains()
if (event.target.classList.contains('item')) { }

// Method 2: matches() - CSS selector
if (event.target.matches('.item')) { }
if (event.target.matches('button.primary')) { }

// Method 3: tagName
if (event.target.tagName === 'BUTTON') { }

// Method 4: closest() - find ancestor
const card = event.target.closest('.card');
if (card) {
  // Clicked somewhere inside a card
}

// DELEGATION WITH CLOSEST

table.addEventListener('click', (event) => {
  // Find the row, even if clicked on cell
  const row = event.target.closest('tr');
  
  if (row && row.dataset.id) {
    console.log('Row clicked:', row.dataset.id);
  }
});

// REAL-WORLD EXAMPLE - Image Gallery

const gallery = document.getElementById('gallery');
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImg');

gallery.addEventListener('click', (event) => {
  if (event.target.tagName === 'IMG') {
    modal.style.display = 'block';
    modalImg.src = event.target.src;
  }
});

modal.addEventListener('click', () => {
  modal.style.display = 'none';
});

// WHEN NOT TO USE DELEGATION

// 1. Events that don't bubble (focus, blur)
// 2. Need to bind this to specific element
// 3. Very specific single-element handler

// For non-bubbling events
const input = document.getElementById('myInput');
input.addEventListener('focus', () => {
  // Must attach directly
});

10. Explain different ways to manipulate the DOM. Compare innerHTML, textContent, createElement, and when to use each.

Difficulty: MediumType: SubjectiveTopic: DOM Basics

JavaScript provides multiple methods for DOM manipulation, each with different use cases, performance, and security implications. InnerHTML: Gets or sets HTML content as a string. Parses HTML and creates elements. Fast for large replacements. Security risk with user input due to XSS attacks. Use for trusted HTML content or templates. Avoid for user-generated content. TextContent: Gets or sets text content without HTML parsing. Faster and safer than innerHTML. Includes hidden text. Use for plain text to prevent XSS. Best for user input display. No security concerns. InnerText: Gets visible text respecting CSS display. Triggers reflow, slower than textContent. Excludes hidden elements. Use when you need only visible text. Less common in practice. CreateElement with appendChild: Creates elements programmatically. Most secure and flexible. Better performance for single elements. Full control over attributes and properties. Use for dynamic element creation. Best for complex structures. InsertAdjacentHTML: Inserts HTML at specific position. Does not replace existing content. More efficient than innerHTML for additions. Same XSS risk as innerHTML. Use for adding content without replacing. Document Fragment: Creates off-screen container for multiple elements. Add many elements, then append once. Minimizes reflows and repaints. Best performance for bulk operations. Use when adding many elements. When to use each: Use textContent for user-generated text. Use createElement for programmatic element creation. Use innerHTML only for trusted HTML templates. Use document fragments for multiple elements. Always sanitize user input. Performance considerations: TextContent is fastest for text. InnerHTML is fast for bulk replacements. CreateElement is best for single elements. Document fragments optimize multiple additions. Security best practices: Never use innerHTML with user input. Always escape or sanitize user data. Prefer textContent or createElement. Use Content Security Policy. Validate on server side too.

Example code

// innerHTML - HTML parsing

const container = document.getElementById('container');

// Set HTML content
container.innerHTML = '<p>Hello <strong>World</strong></p>';
// Creates actual <p> and <strong> elements

// Get HTML content
console.log(container.innerHTML);
// '<p>Hello <strong>World</strong></p>'

// SECURITY RISK with user input
const userInput = '<img src=x onerror="alert(\'XSS\')">';
// container.innerHTML = userInput; // DANGER! Executes script

// Safe alternative for user input
container.textContent = userInput; // Displays as text

// textContent - Plain text

// Set text (safe)
container.textContent = 'Plain text <b>not parsed</b>';
// Displays: Plain text <b>not parsed</b>

// Get all text (includes hidden)
const div = document.createElement('div');
div.innerHTML = 'Visible <span style="display:none">Hidden</span>';
console.log(div.textContent); // 'Visible Hidden'
console.log(div.innerText);   // 'Visible' (excludes hidden)

// createElement - Programmatic creation

function createCard(title, description) {
  const card = document.createElement('div');
  card.className = 'card';
  
  const heading = document.createElement('h3');
  heading.textContent = title; // Safe
  
  const para = document.createElement('p');
  para.textContent = description; // Safe
  
  const button = document.createElement('button');
  button.textContent = 'Click';
  button.addEventListener('click', () => {
    console.log('Clicked:', title);
  });
  
  card.appendChild(heading);
  card.appendChild(para);
  card.appendChild(button);
  
  return card;
}

container.appendChild(createCard('Title', 'Description'));

// PERFORMANCE COMPARISON

// Slow - multiple reflows
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // Reflow each time!
}

// Fast - one reflow with fragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
list.appendChild(fragment); // One reflow!

// Fast - innerHTML for bulk
const html = Array.from({length: 100}, (_, i) => 
  `<li>Item ${i}</li>`
).join('');
list.innerHTML = html;

// insertAdjacentHTML - Positioned insertion

const element = document.getElementById('target');

// Four positions:
element.insertAdjacentHTML('beforebegin', '<p>Before</p>');
element.insertAdjacentHTML('afterbegin', '<p>First child</p>');
element.insertAdjacentHTML('beforeend', '<p>Last child</p>');
element.insertAdjacentHTML('afterend', '<p>After</p>');

// REAL-WORLD EXAMPLES

// Example 1: Render user list (safe)
function renderUsers(users) {
  const list = document.getElementById('userList');
  list.innerHTML = ''; // Clear
  
  users.forEach(user => {
    const li = document.createElement('li');
    li.className = 'user-item';
    
    const name = document.createElement('span');
    name.textContent = user.name; // Safe from XSS
    
    const email = document.createElement('span');
    email.textContent = user.email;
    
    li.appendChild(name);
    li.appendChild(email);
    list.appendChild(li);
  });
}

// Example 2: Template with safe interpolation
function createProductCard(product) {
  const template = document.createElement('div');
  template.className = 'product';
  
  // Safe way to build HTML
  const img = document.createElement('img');
  img.src = product.image;
  img.alt = product.name;
  
  const title = document.createElement('h3');
  title.textContent = product.name;
  
  const price = document.createElement('p');
  price.textContent = `$${product.price}`;
  
  template.append(img, title, price);
  return template;
}

// Example 3: Efficient list rendering
function renderLargeList(items) {
  const fragment = document.createDocumentFragment();
  
  items.forEach(item => {
    const div = document.createElement('div');
    div.textContent = item;
    fragment.appendChild(div);
  });
  
  container.appendChild(fragment);
}

// WHEN TO USE WHAT

// Use textContent:
// - User input display
// - Plain text updates
// - Security-sensitive content

// Use innerHTML:
// - Trusted HTML templates
// - Bulk HTML generation
// - Performance-critical bulk updates

// Use createElement:
// - Single element creation
// - Complex element structures
// - When you need event listeners
// - Maximum security and control

// Use document fragment:
// - Adding multiple elements
// - Performance-critical operations
// - Reducing reflows

11. What is the difference between getElementById and querySelector?

Difficulty: EasyType: MCQTopic: DOM Basics

GetElementById selects a single element by its ID attribute. It is faster because it directly uses the browser's optimized ID lookup. It returns the element or null if not found. QuerySelector uses CSS selector syntax and is more flexible. You can select by ID, class, attribute, or any CSS selector. It returns the first matching element or null. QuerySelector is slower but more powerful. Use getElementById when selecting by ID for better performance. Use querySelector when you need CSS selector flexibility. Both return a single element. For multiple elements, use getElementsByClassName or querySelectorAll. Understanding DOM selection methods is fundamental to JavaScript web development.

Example code

// getElementById - fast, ID only
const header = document.getElementById('header');
console.log(header); // <div id="header">...</div>

// Must use ID without #
// const wrong = document.getElementById('#header'); // Wrong!

// querySelector - flexible, any CSS selector
const header2 = document.querySelector('#header');
const firstButton = document.querySelector('button');
const activeItem = document.querySelector('.item.active');
const input = document.querySelector('input[type="email"]');

// querySelector returns first match only
const buttons = document.querySelectorAll('button'); // All buttons
console.log(buttons.length); // e.g., 5

const firstBtn = document.querySelector('button'); // First button only

// Performance comparison
console.time('getElementById');
for (let i = 0; i < 10000; i++) {
  document.getElementById('header');
}
console.timeEnd('getElementById'); // Faster

console.time('querySelector');
for (let i = 0; i < 10000; i++) {
  document.querySelector('#header');
}
console.timeEnd('querySelector'); // Slower

// Complex selectors with querySelector
const nested = document.querySelector('div.container > p.text');
const nthChild = document.querySelector('li:nth-child(3)');
const notClass = document.querySelector('div:not(.excluded)');

// Other selection methods
const byClass = document.getElementsByClassName('item'); // HTMLCollection
const byTag = document.getElementsByTagName('p'); // HTMLCollection
const allDivs = document.querySelectorAll('div'); // NodeList

// Difference: HTMLCollection vs NodeList
// HTMLCollection is live, NodeList from querySelectorAll is static
const liveList = document.getElementsByClassName('item');
const staticList = document.querySelectorAll('.item');

console.log(liveList.length);   // e.g., 3
console.log(staticList.length); // e.g., 3

// Add new element with class 'item'
document.body.innerHTML += '<div class="item">New</div>';

console.log(liveList.length);   // 4 (updated automatically!)
console.log(staticList.length); // 3 (stays same)

12. What is the difference between addEventListener and onclick?

Difficulty: MediumType: MCQTopic: DOM Events

AddEventListener is the modern way to attach event handlers. You can add multiple handlers for the same event. It provides options for capture, once, and passive. It separates JavaScript from HTML. Onclick is the older inline approach. Only one handler can exist at a time. Setting onclick again overwrites the previous handler. It is simpler but less flexible. AddEventListener is preferred because it is more flexible, allows multiple handlers, provides better control, and follows best practices of separation of concerns. You can remove listeners added with addEventListener using removeEventListener. You cannot remove onclick handlers the same way. Understanding event handling is crucial for interactive web applications.

Example code

const button = document.getElementById('myButton');

// onclick - only one handler
button.onclick = function() {
  console.log('Click 1');
};

button.onclick = function() {
  console.log('Click 2');
};
// Only 'Click 2' executes (overwrites first)

// addEventListener - multiple handlers
button.addEventListener('click', function() {
  console.log('Handler 1');
});

button.addEventListener('click', function() {
  console.log('Handler 2');
});
// Both execute: 'Handler 1' then 'Handler 2'

// Removing event listeners

function handleClick() {
  console.log('Clicked');
}

button.addEventListener('click', handleClick);
// Can remove later
button.removeEventListener('click', handleClick);

// Cannot remove anonymous functions
button.addEventListener('click', function() {
  console.log('Cannot remove this');
});

// Event listener options

// Capture phase
button.addEventListener('click', function() {
  console.log('Capture phase');
}, true);

// Once - executes only once, then removes itself
button.addEventListener('click', function() {
  console.log('Fires once');
}, { once: true });

// Passive - improves scroll performance
button.addEventListener('touchstart', function() {
  // Cannot call preventDefault
}, { passive: true });

// Multiple options
button.addEventListener('click', function() {
  console.log('Options');
}, {
  capture: false,
  once: false,
  passive: false
});

// INLINE HTML (avoid this)
// <button onclick="handleClick()">Click</button>
// Mixes HTML and JavaScript, bad practice

// PRACTICAL COMPARISON

// onclick approach
const btn1 = document.getElementById('btn1');
btn1.onclick = () => console.log('One');
btn1.onclick = () => console.log('Two'); // Overwrites

// addEventListener approach
const btn2 = document.getElementById('btn2');
btn2.addEventListener('click', () => console.log('One'));
btn2.addEventListener('click', () => console.log('Two')); // Both work

// Event object
button.addEventListener('click', function(event) {
  console.log('Target:', event.target);
  console.log('Type:', event.type);
  console.log('Timestamp:', event.timeStamp);
  event.preventDefault(); // Prevent default action
  event.stopPropagation(); // Stop bubbling
});

More sets in Javascript

JavaScript Fundamentals(15+ Questions)
Operators and Functions(15+ Questions)
Arrays and Loops(15+ Questions)
Functions - Part 1(13+ Questions)
JavaScript Core Interview Essentials(13+ Questions)
Closures and Asynchronous JavaScript(14+ Questions)
Objects & Prototypes(12+ Questions)
Objects and this Keyword(15+ Questions)
Strings and Template Literals(15+ Questions)
Prototypes and Inheritance(14+ Questions)
ES6+ Advanced Features(12+ Questions)
Performance Optimization and Advanced Techniques(10+ Questions)
Call, Apply, Bind and Advanced Functions(14+ Questions)

Explore related subjects

HTML CSS Typescript SQL & Databases React Node Js

Continue your preparation

For complete preparation, combine this set with full subject-wise practice for Javascript. You can also explore other subjects and sets from the links below.

Quick navigation:Javascript subject page•All subjects

// SET ITEM localStorage.setItem('username', 'John'); localStorage.setItem('theme', 'dark'); // GET ITEM const username = localStorage.getItem('username'); console.log(username); // 'John' const theme = localStorage.getItem('theme'); console.log(theme); // 'dark' // Non-existent key returns null const missing = localStorage.getItem('missing'); console.log(missing); // null // REMOVE ITEM localStorage.removeItem('username'); // CLEAR ALL localStorage.clear(); // Removes everything // STORE OBJECTS (must stringify) const user = { name: 'John', age: 30, preferences: { theme: 'dark' } }; // Store localStorage.setItem('user', JSON.stringify(user)); // Retrieve const storedUser = JSON.parse(localStorage.getItem('user')); console.log(storedUser.name); // 'John' // STORE ARRAY const items = ['apple', 'banana', 'orange']; localStorage.setItem('items', JSON.stringify(items)); const retrievedItems = JSON.parse(localStorage.getItem('items')); console.log(retrievedItems); // ['apple', 'banana', 'orange'] // CHECK IF KEY EXISTS if (localStorage.getItem('username') !== null) { console.log('Username exists'); } // GET ALL KEYS for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); console.log(key, localStorage.getItem(key)); } // HELPER FUNCTIONS // Safe get with default function getFromStorage(key, defaultValue = null) { const value = localStorage.getItem(key); if (value === null) return defaultValue; try { return JSON.parse(value); } catch { return value; } } // Safe set function setInStorage(key, value) { try { localStorage.setItem(key, JSON.stringify(value)); return true; } catch (error) { console.error('Storage error:', error); return false; } } // PRACTICAL EXAMPLES // Dark mode toggle const toggleBtn = document.getElementById('themeToggle'); // Load saved theme const savedTheme = localStorage.getItem('theme') || 'light'; document.body.classList.add(savedTheme); toggleBtn.addEventListener('click', () => { document.body.classList.toggle('dark'); const newTheme = document.body.classList.contains('dark') ? 'dark' : 'light'; localStorage.setItem('theme', newTheme); }); // Save form progress const form = document.getElementById('myForm'); const inputs = form.querySelectorAll('input, textarea'); // Save on input inputs.forEach(input => { // Load saved value const saved = localStorage.getItem(input.name); if (saved) input.value = saved; // Save on change input.addEventListener('input', () => { localStorage.setItem(input.name, input.value); }); }); // Clear on submit form.addEventListener('submit', () => { inputs.forEach(input => { localStorage.removeItem(input.name); }); }); // Shopping cart function addToCart(item) { const cart = JSON.parse(localStorage.getItem('cart')) || []; cart.push(item); localStorage.setItem('cart', JSON.stringify(cart)); } function getCart() { return JSON.parse(localStorage.getItem('cart')) || []; } function clearCart() { localStorage.removeItem('cart'); } // STORAGE EVENT (listen for changes in other tabs) window.addEventListener('storage', (event) => { console.log('Storage changed!'); console.log('Key:', event.key); console.log('Old value:', event.oldValue); console.log('New value:', event.newValue); console.log('URL:', event.url); }); // SESSION STORAGE (clears on browser close) sessionStorage.setItem('sessionData', 'value'); const sessionData = sessionStorage.getItem('sessionData'); // STORAGE LIMITS try { // Test storage limit const testKey = 'test'; const testValue = 'x'.repeat(10 * 1024 * 1024); // 10MB localStorage.setItem(testKey, testValue); } catch (error) { console.error('Storage quota exceeded'); }

// EVENT PROPAGATION PHASES const outer = document.getElementById('outer'); const middle = document.getElementById('middle'); const inner = document.getElementById('inner'); // Capture phase (true parameter) outer.addEventListener('click', () => { console.log('Outer CAPTURE'); }, true); middle.addEventListener('click', () => { console.log('Middle CAPTURE'); }, true); inner.addEventListener('click', () => { console.log('Inner CAPTURE'); }, true); // Bubble phase (default) outer.addEventListener('click', () => { console.log('Outer BUBBLE'); }); middle.addEventListener('click', () => { console.log('Middle BUBBLE'); }); inner.addEventListener('click', () => { console.log('Inner BUBBLE'); }); // When inner clicked, output: // Outer CAPTURE // Middle CAPTURE // Inner CAPTURE // Inner BUBBLE // Middle BUBBLE // Outer BUBBLE // EVENT DELEGATION - Todo List const todoList = document.getElementById('todoList'); // One listener for all todos todoList.addEventListener('click', (event) => { const target = event.target; // Delete button clicked if (target.classList.contains('delete')) { const li = target.closest('li'); li.remove(); } // Checkbox clicked if (target.type === 'checkbox') { const li = target.closest('li'); li.classList.toggle('completed'); } // Edit button clicked if (target.classList.contains('edit')) { const li = target.closest('li'); const span = li.querySelector('.text'); span.contentEditable = true; span.focus(); } }); // Add todos dynamically (delegation handles them automatically) function addTodo(text) { const li = document.createElement('li'); li.innerHTML = ` <input type="checkbox"> <span class="text">${text}</span> <button class="edit">Edit</button> <button class="delete">Delete</button> `; todoList.appendChild(li); } // EVENT DELEGATION - Table const table = document.getElementById('dataTable'); table.addEventListener('click', (event) => { const target = event.target; // Find the row (even if clicked on cell) const row = target.closest('tr'); if (row && row.dataset.id) { console.log('Row clicked:', row.dataset.id); // Check which column const cell = target.closest('td'); if (cell) { const columnIndex = cell.cellIndex; console.log('Column:', columnIndex); // Handle specific columns if (columnIndex === 3) { // Actions column if (target.classList.contains('edit')) { editRow(row.dataset.id); } if (target.classList.contains('delete')) { deleteRow(row.dataset.id); } } } } }); // CLICK OUTSIDE TO CLOSE const dropdown = document.getElementById('dropdown'); const button = document.getElementById('dropdownBtn'); // Open dropdown button.addEventListener('click', (event) => { event.stopPropagation(); // Don't trigger document listener dropdown.classList.add('open'); }); // Close when clicking outside document.addEventListener('click', (event) => { if (!dropdown.contains(event.target)) { dropdown.classList.remove('open'); } }); // Don't close when clicking inside dropdown dropdown.addEventListener('click', (event) => { event.stopPropagation(); }); // MODAL WITH EVENT DELEGATION const modal = document.getElementById('modal'); const modalContent = modal.querySelector('.modal-content'); // Close on background click modal.addEventListener('click', (event) => { // Only close if clicked directly on modal, not children if (event.target === modal) { closeModal(); } }); // Alternative: check if clicked outside content modal.addEventListener('click', (event) => { if (!modalContent.contains(event.target)) { closeModal(); } }); // NAVIGATION MENU const nav = document.getElementById('nav'); nav.addEventListener('click', (event) => { const link = event.target.closest('a'); if (link) { // Check if has submenu const parent = link.parentElement; if (parent.querySelector('.submenu')) { event.preventDefault(); parent.classList.toggle('open'); } } }); // FORM WITH DELEGATION const form = document.getElementById('dynamicForm'); // Handle all inputs with delegation form.addEventListener('input', (event) => { const input = event.target; if (input.type === 'email') { validateEmail(input); } if (input.type === 'password') { validatePassword(input); } if (input.hasAttribute('data-validate')) { validateField(input); } }); // Handle all buttons form.addEventListener('click', (event) => { if (event.target.matches('.add-field')) { addField(); } if (event.target.matches('.remove-field')) { event.target.closest('.field').remove(); } }); // PERFORMANCE COMPARISON // Bad: Many listeners (memory intensive) const items = document.querySelectorAll('.item'); items.forEach(item => { item.addEventListener('click', handleClick); }); // If 1000 items = 1000 listeners! // Good: One listener with delegation const container = document.getElementById('container'); container.addEventListener('click', (event) => { if (event.target.classList.contains('item')) { handleClick(event); } }); // Only 1 listener for 1000 items! // STOPPING PROPAGATION inner.addEventListener('click', (event) => { console.log('Inner'); event.stopPropagation(); // Stops bubbling // Outer handlers won't fire }); // Stop other handlers on same element button.addEventListener('click', (event) => { console.log('First'); event.stopImmediatePropagation(); }); button.addEventListener('click', () => { console.log('Second'); // Won't execute });

// CREATE ELEMENT const div = document.createElement('div'); console.log(div); // <div></div> (not in DOM yet) // Set properties div.id = 'myDiv'; div.className = 'container'; div.textContent = 'Hello World'; // Set attributes div.setAttribute('data-id', '123'); div.setAttribute('title', 'Tooltip'); // Add styles div.style.color = 'blue'; div.style.padding = '10px'; // ADD TO DOM with appendChild document.body.appendChild(div); // Now visible in page // CREATE COMPLEX ELEMENT const card = document.createElement('div'); card.className = 'card'; const title = document.createElement('h3'); title.textContent = 'Card Title'; const text = document.createElement('p'); text.textContent = 'Card description'; const button = document.createElement('button'); button.textContent = 'Click Me'; button.addEventListener('click', () => { console.log('Button clicked'); }); // Assemble card.appendChild(title); card.appendChild(text); card.appendChild(button); // Add to page document.body.appendChild(card); // APPEND VS APPENDCHILD const container = document.getElementById('container'); // appendChild - one node only, returns appended node const p1 = document.createElement('p'); p1.textContent = 'Paragraph 1'; container.appendChild(p1); // append - multiple nodes and text, returns undefined const p2 = document.createElement('p'); p2.textContent = 'Paragraph 2'; container.append(p2, 'Some text', document.createElement('span')); // PREPEND - add at beginning const first = document.createElement('div'); first.textContent = 'First'; container.prepend(first); // Adds at start // INSERT AT SPECIFIC POSITION const reference = document.getElementById('reference'); const newElement = document.createElement('div'); // Insert before reference reference.parentNode.insertBefore(newElement, reference); // insertAdjacentElement reference.insertAdjacentElement('beforebegin', newElement); // Before element reference.insertAdjacentElement('afterbegin', newElement); // First child reference.insertAdjacentElement('beforeend', newElement); // Last child reference.insertAdjacentElement('afterend', newElement); // After element // REMOVING ELEMENTS // Modern way element.remove(); // Old way parent.removeChild(element); // REPLACING ELEMENTS const oldElement = document.getElementById('old'); const newElement2 = document.createElement('div'); newElement2.textContent = 'New'; oldElement.replaceWith(newElement2); // Modern oldElement.parentNode.replaceChild(newElement2, oldElement); // Old // CLONING ELEMENTS const original = document.getElementById('template'); // Shallow clone (no children) const shallow = original.cloneNode(false); // Deep clone (with children) const deep = original.cloneNode(true); // DOCUMENT FRAGMENT (efficient for multiple elements) const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const item = document.createElement('li'); item.textContent = `Item ${i}`; fragment.appendChild(item); } // Add all at once (one reflow instead of 100) document.getElementById('list').appendChild(fragment); // PRACTICAL EXAMPLE - Create card function createCard(title, description) { const card = document.createElement('div'); card.className = 'card'; const heading = document.createElement('h3'); heading.textContent = title; const para = document.createElement('p'); para.textContent = description; card.append(heading, para); return card; } const myCard = createCard('Title', 'Description'); document.body.appendChild(myCard);

// HTML structure: // <div id="outer"> // <div id="middle"> // <button id="inner">Click</button> // </div> // </div> const outer = document.getElementById('outer'); const middle = document.getElementById('middle'); const inner = document.getElementById('inner'); // Add listeners to all three outer.addEventListener('click', () => { console.log('Outer clicked'); }); middle.addEventListener('click', () => { console.log('Middle clicked'); }); inner.addEventListener('click', () => { console.log('Inner clicked'); }); // When button clicked, output: // 'Inner clicked' // 'Middle clicked' // 'Outer clicked' // Event bubbles from inner to outer! // STOPPING PROPAGATION inner.addEventListener('click', (event) => { console.log('Inner clicked'); event.stopPropagation(); // Stop bubbling! }); // Now only 'Inner clicked' appears // EVENT PHASES // 1. Capture phase (root to target) outer.addEventListener('click', () => { console.log('Outer capture'); }, true); // true = capture phase // 2. Target phase inner.addEventListener('click', () => { console.log('Target'); }); // 3. Bubble phase (target to root) outer.addEventListener('click', () => { console.log('Outer bubble'); }, false); // false = bubble phase (default) // Output when inner clicked: // 'Outer capture' (capture phase) // 'Target' (target phase) // 'Outer bubble' (bubble phase) // EVENT DELEGATION // Instead of adding listener to each item const list = document.getElementById('list'); // Add one listener to parent list.addEventListener('click', (event) => { if (event.target.tagName === 'LI') { console.log('Clicked:', event.target.textContent); } }); // Works for dynamically added items too! const newItem = document.createElement('li'); newItem.textContent = 'New Item'; list.appendChild(newItem); // Clicking new item works without adding listener! // PRACTICAL EXAMPLE - Modal const modal = document.getElementById('modal'); const modalContent = document.querySelector('.modal-content'); const closeBtn = document.querySelector('.close'); // Close modal when clicking outside modal.addEventListener('click', () => { modal.style.display = 'none'; }); // Don't close when clicking content modalContent.addEventListener('click', (event) => { event.stopPropagation(); // Don't bubble to modal }); // Close button closeBtn.addEventListener('click', () => { modal.style.display = 'none'; }); // PREVENTING DEFAULT AND BUBBLING const link = document.querySelector('a'); link.addEventListener('click', (event) => { event.preventDefault(); // Don't follow link event.stopPropagation(); // Don't bubble console.log('Link clicked but not followed'); }); // event.stopImmediatePropagation() // Stops other handlers on same element too inner.addEventListener('click', (event) => { console.log('First handler'); event.stopImmediatePropagation(); }); inner.addEventListener('click', () => { console.log('Second handler'); // Won't run });

// HTML: // <div id="parent"> // <button id="child">Click Me</button> // </div> const parent = document.getElementById('parent'); parent.addEventListener('click', function(event) { console.log('target:', event.target.id); console.log('currentTarget:', event.currentTarget.id); }); // When clicking button: // target: 'child' (button was clicked) // currentTarget: 'parent' (listener is on parent) // When clicking parent directly: // target: 'parent' // currentTarget: 'parent' // (both same when clicking listener element) // EVENT DELEGATION EXAMPLE const list = document.getElementById('list'); // <ul id="list"> // <li>Item 1</li> // <li>Item 2</li> // </ul> list.addEventListener('click', function(event) { console.log('Clicked:', event.target.textContent); console.log('Listener on:', event.currentTarget.id); // Check if clicked element is LI if (event.target.tagName === 'LI') { event.target.style.backgroundColor = 'yellow'; } }); // OTHER EVENT PROPERTIES document.addEventListener('click', function(event) { console.log('Type:', event.type); // 'click' console.log('Target:', event.target); console.log('CurrentTarget:', event.currentTarget); // document console.log('Timestamp:', event.timeStamp); console.log('Bubbles:', event.bubbles); // true for most events console.log('Cancelable:', event.cancelable); }); // MOUSE EVENT PROPERTIES document.addEventListener('click', function(event) { console.log('ClientX:', event.clientX); // X relative to viewport console.log('ClientY:', event.clientY); // Y relative to viewport console.log('PageX:', event.pageX); // X relative to document console.log('PageY:', event.pageY); // Y relative to document console.log('ScreenX:', event.screenX); // X relative to screen console.log('ScreenY:', event.screenY); // Y relative to screen console.log('Button:', event.button); // 0=left, 1=middle, 2=right }); // KEYBOARD EVENT PROPERTIES document.addEventListener('keydown', function(event) { console.log('Key:', event.key); // 'a', 'Enter', etc. console.log('Code:', event.code); // 'KeyA', 'Enter', etc. console.log('KeyCode:', event.keyCode); // Deprecated console.log('AltKey:', event.altKey); // true if Alt pressed console.log('CtrlKey:', event.ctrlKey); // true if Ctrl pressed console.log('ShiftKey:', event.shiftKey); }); // PRACTICAL EXAMPLE - Click outside to close const dropdown = document.getElementById('dropdown'); const button = document.getElementById('dropdownBtn'); button.addEventListener('click', (event) => { event.stopPropagation(); dropdown.classList.toggle('open'); }); document.addEventListener('click', (event) => { // If click is outside dropdown if (!dropdown.contains(event.target)) { dropdown.classList.remove('open'); } }); // FORM EVENTS const form = document.getElementById('myForm'); form.addEventListener('submit', function(event) { event.preventDefault(); // Stop form submission console.log('Form submitted'); console.log('Target:', event.target); // The <form> element // Get form data const formData = new FormData(event.target); console.log(formData.get('username')); });

// WITHOUT EVENT DELEGATION (bad for many elements) const items = document.querySelectorAll('.item'); items.forEach(item => { item.addEventListener('click', () => { console.log('Item clicked'); }); }); // Problems: // - 100 items = 100 event listeners (memory!) // - Doesn't work for dynamically added items // WITH EVENT DELEGATION (efficient) const list = document.getElementById('list'); list.addEventListener('click', (event) => { // Check if clicked element is an item if (event.target.classList.contains('item')) { console.log('Item clicked:', event.target.textContent); } }); // Benefits: // - One listener for all items // - Works for items added later // - Better performance // PRACTICAL EXAMPLE - Todo List const todoList = document.getElementById('todoList'); todoList.addEventListener('click', (event) => { const target = event.target; // Handle delete button if (target.classList.contains('delete-btn')) { target.parentElement.remove(); } // Handle checkbox if (target.type === 'checkbox') { target.parentElement.classList.toggle('completed'); } // Handle edit button if (target.classList.contains('edit-btn')) { const li = target.parentElement; const text = li.querySelector('.text'); text.contentEditable = true; text.focus(); } }); // Add new items dynamically function addTodo(text) { const li = document.createElement('li'); li.innerHTML = ` <input type="checkbox"> <span class="text">${text}</span> <button class="edit-btn">Edit</button> <button class="delete-btn">Delete</button> `; todoList.appendChild(li); // No need to add event listeners! } // ADVANCED DELEGATION - Multiple event types const container = document.getElementById('container'); // Handle multiple events on parent container.addEventListener('click', handleClick); container.addEventListener('dblclick', handleDoubleClick); container.addEventListener('contextmenu', handleRightClick); function handleClick(event) { if (event.target.matches('.button')) { console.log('Button clicked'); } } function handleDoubleClick(event) { if (event.target.matches('.item')) { console.log('Item double clicked'); } } function handleRightClick(event) { if (event.target.matches('.card')) { event.preventDefault(); showContextMenu(event); } } // CHECKING TARGET ELEMENT // Method 1: classList.contains() if (event.target.classList.contains('item')) { } // Method 2: matches() - CSS selector if (event.target.matches('.item')) { } if (event.target.matches('button.primary')) { } // Method 3: tagName if (event.target.tagName === 'BUTTON') { } // Method 4: closest() - find ancestor const card = event.target.closest('.card'); if (card) { // Clicked somewhere inside a card } // DELEGATION WITH CLOSEST table.addEventListener('click', (event) => { // Find the row, even if clicked on cell const row = event.target.closest('tr'); if (row && row.dataset.id) { console.log('Row clicked:', row.dataset.id); } }); // REAL-WORLD EXAMPLE - Image Gallery const gallery = document.getElementById('gallery'); const modal = document.getElementById('modal'); const modalImg = document.getElementById('modalImg'); gallery.addEventListener('click', (event) => { if (event.target.tagName === 'IMG') { modal.style.display = 'block'; modalImg.src = event.target.src; } }); modal.addEventListener('click', () => { modal.style.display = 'none'; }); // WHEN NOT TO USE DELEGATION // 1. Events that don't bubble (focus, blur) // 2. Need to bind this to specific element // 3. Very specific single-element handler // For non-bubbling events const input = document.getElementById('myInput'); input.addEventListener('focus', () => { // Must attach directly });

// innerHTML - HTML parsing const container = document.getElementById('container'); // Set HTML content container.innerHTML = '<p>Hello <strong>World</strong></p>'; // Creates actual <p> and <strong> elements // Get HTML content console.log(container.innerHTML); // '<p>Hello <strong>World</strong></p>' // SECURITY RISK with user input const userInput = '<img src=x onerror="alert(\'XSS\')">'; // container.innerHTML = userInput; // DANGER! Executes script // Safe alternative for user input container.textContent = userInput; // Displays as text // textContent - Plain text // Set text (safe) container.textContent = 'Plain text <b>not parsed</b>'; // Displays: Plain text <b>not parsed</b> // Get all text (includes hidden) const div = document.createElement('div'); div.innerHTML = 'Visible <span style="display:none">Hidden</span>'; console.log(div.textContent); // 'Visible Hidden' console.log(div.innerText); // 'Visible' (excludes hidden) // createElement - Programmatic creation function createCard(title, description) { const card = document.createElement('div'); card.className = 'card'; const heading = document.createElement('h3'); heading.textContent = title; // Safe const para = document.createElement('p'); para.textContent = description; // Safe const button = document.createElement('button'); button.textContent = 'Click'; button.addEventListener('click', () => { console.log('Clicked:', title); }); card.appendChild(heading); card.appendChild(para); card.appendChild(button); return card; } container.appendChild(createCard('Title', 'Description')); // PERFORMANCE COMPARISON // Slow - multiple reflows for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; list.appendChild(li); // Reflow each time! } // Fast - one reflow with fragment const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; fragment.appendChild(li); } list.appendChild(fragment); // One reflow! // Fast - innerHTML for bulk const html = Array.from({length: 100}, (_, i) => `<li>Item ${i}</li>` ).join(''); list.innerHTML = html; // insertAdjacentHTML - Positioned insertion const element = document.getElementById('target'); // Four positions: element.insertAdjacentHTML('beforebegin', '<p>Before</p>'); element.insertAdjacentHTML('afterbegin', '<p>First child</p>'); element.insertAdjacentHTML('beforeend', '<p>Last child</p>'); element.insertAdjacentHTML('afterend', '<p>After</p>'); // REAL-WORLD EXAMPLES // Example 1: Render user list (safe) function renderUsers(users) { const list = document.getElementById('userList'); list.innerHTML = ''; // Clear users.forEach(user => { const li = document.createElement('li'); li.className = 'user-item'; const name = document.createElement('span'); name.textContent = user.name; // Safe from XSS const email = document.createElement('span'); email.textContent = user.email; li.appendChild(name); li.appendChild(email); list.appendChild(li); }); } // Example 2: Template with safe interpolation function createProductCard(product) { const template = document.createElement('div'); template.className = 'product'; // Safe way to build HTML const img = document.createElement('img'); img.src = product.image; img.alt = product.name; const title = document.createElement('h3'); title.textContent = product.name; const price = document.createElement('p'); price.textContent = `$${product.price}`; template.append(img, title, price); return template; } // Example 3: Efficient list rendering function renderLargeList(items) { const fragment = document.createDocumentFragment(); items.forEach(item => { const div = document.createElement('div'); div.textContent = item; fragment.appendChild(div); }); container.appendChild(fragment); } // WHEN TO USE WHAT // Use textContent: // - User input display // - Plain text updates // - Security-sensitive content // Use innerHTML: // - Trusted HTML templates // - Bulk HTML generation // - Performance-critical bulk updates // Use createElement: // - Single element creation // - Complex element structures // - When you need event listeners // - Maximum security and control // Use document fragment: // - Adding multiple elements // - Performance-critical operations // - Reducing reflows

// getElementById - fast, ID only const header = document.getElementById('header'); console.log(header); // <div id="header">...</div> // Must use ID without # // const wrong = document.getElementById('#header'); // Wrong! // querySelector - flexible, any CSS selector const header2 = document.querySelector('#header'); const firstButton = document.querySelector('button'); const activeItem = document.querySelector('.item.active'); const input = document.querySelector('input[type="email"]'); // querySelector returns first match only const buttons = document.querySelectorAll('button'); // All buttons console.log(buttons.length); // e.g., 5 const firstBtn = document.querySelector('button'); // First button only // Performance comparison console.time('getElementById'); for (let i = 0; i < 10000; i++) { document.getElementById('header'); } console.timeEnd('getElementById'); // Faster console.time('querySelector'); for (let i = 0; i < 10000; i++) { document.querySelector('#header'); } console.timeEnd('querySelector'); // Slower // Complex selectors with querySelector const nested = document.querySelector('div.container > p.text'); const nthChild = document.querySelector('li:nth-child(3)'); const notClass = document.querySelector('div:not(.excluded)'); // Other selection methods const byClass = document.getElementsByClassName('item'); // HTMLCollection const byTag = document.getElementsByTagName('p'); // HTMLCollection const allDivs = document.querySelectorAll('div'); // NodeList // Difference: HTMLCollection vs NodeList // HTMLCollection is live, NodeList from querySelectorAll is static const liveList = document.getElementsByClassName('item'); const staticList = document.querySelectorAll('.item'); console.log(liveList.length); // e.g., 3 console.log(staticList.length); // e.g., 3 // Add new element with class 'item' document.body.innerHTML += '<div class="item">New</div>'; console.log(liveList.length); // 4 (updated automatically!) console.log(staticList.length); // 3 (stays same)

DOM Manipulation and Events – Javascript interview questions

Set overview

1. What is the correct way to prevent form submission?

2. What is localStorage in JavaScript?

3. Explain event bubbling, capturing, and event delegation. Provide practical examples and use cases.

4. What is the correct way to create and add an element to the DOM?

5. What is the difference between innerHTML, textContent, and innerText?

6. What is event bubbling in JavaScript?

7. What is event.target vs event.currentTarget?

8. What is the classList property used for?

9. What is event delegation and why is it useful?

10. Explain different ways to manipulate the DOM. Compare innerHTML, textContent, createElement, and when to use each.

11. What is the difference between getElementById and querySelector?

12. What is the difference between addEventListener and onclick?

More sets in Javascript

Explore related subjects

Continue your preparation

Master Interviews Anywhere, Anytime

DOM Manipulation and Events – Javascript interview questions

Set overview

1. What is the correct way to prevent form submission?

2. What is localStorage in JavaScript?

3. Explain event bubbling, capturing, and event delegation. Provide practical examples and use cases.

4. What is the correct way to create and add an element to the DOM?

5. What is the difference between innerHTML, textContent, and innerText?

6. What is event bubbling in JavaScript?

7. What is event.target vs event.currentTarget?

8. What is the classList property used for?

9. What is event delegation and why is it useful?

10. Explain different ways to manipulate the DOM. Compare innerHTML, textContent, createElement, and when to use each.

11. What is the difference between getElementById and querySelector?

12. What is the difference between addEventListener and onclick?

More sets in Javascript

Explore related subjects

Continue your preparation

Master Interviews
Anywhere, Anytime