The DOM and Browser APIs

Quiz: DOM and Browser API Return Values

beginner8 min read

Do You Actually Know These APIs?

You've worked through the DOM tree, selectors, element manipulation, events, forms, storage, fetch, timers, observers, and the History API. That's a lot of surface area. Now let's see if the concepts actually stuck.

These questions aren't trivia — they test the exact return values, behaviors, and edge cases that show up in real code. Getting these right means you have a working mental model of how the browser actually behaves, not just a vague memory of how the tutorials looked.

Mental Model
Key Rules
  1. 1querySelector returns an element or null — never undefined
  2. 2querySelectorAll returns a static NodeList — never updates
  3. 3getElementsByClassName returns a live HTMLCollection
  4. 4fetch resolves even on 404/500 — only rejects on network failure
  5. 5localStorage values are always strings

Question 1: querySelector on a Missing Element

const result = document.querySelector('.nonexistent');
console.log(result);
Quiz
What does querySelector return when no element matches?

Question 2: querySelectorAll Return Type

const buttons = document.querySelectorAll('button');
console.log(buttons instanceof Array);
Quiz
What does this code log?

Question 3: Live vs Static Collections

const items = document.getElementsByClassName('item');
console.log(items.length); // 3

document.querySelector('.item').remove();
console.log(items.length);
Quiz
What does the second items.length log?

Question 4: textContent vs innerHTML

const div = document.createElement('div');
div.innerHTML = '<span>Hello</span>';
console.log(div.textContent);
Quiz
What does div.textContent return?

Question 5: addEventListener Return Value

const button = document.querySelector('button');
const result = button.addEventListener('click', () => {});
console.log(result);
Quiz
What does addEventListener return?

Question 6: fetch and 404

try {
  const response = await fetch('/not-found');
  console.log('Status:', response.status);
  console.log('OK:', response.ok);
} catch (error) {
  console.log('Caught:', error.message);
}
Quiz
Assuming the server returns a 404 response, what does this code log?

Question 7: localStorage Data Types

localStorage.setItem('count', 42);
const value = localStorage.getItem('count');
console.log(typeof value, value === 42);
Quiz
What does this code log?

Question 8: cloneNode and Event Listeners

const original = document.querySelector('#btn');
original.addEventListener('click', () => console.log('clicked'));

const clone = original.cloneNode(true);
document.body.appendChild(clone);
Quiz
If a user clicks the cloned button, does 'clicked' get logged?

Question 9: IntersectionObserver Callback Timing

const observer = new IntersectionObserver((entries) => {
  console.log('callback fired');
});

const el = document.querySelector('.target');
observer.observe(el);
Quiz
When does the IntersectionObserver callback first fire?

Question 10: pushState and popstate

window.addEventListener('popstate', () => {
  console.log('popstate fired');
});

history.pushState(null, '', '/page-1');
history.pushState(null, '', '/page-2');
Quiz
How many times does 'popstate fired' get logged?
11/11