JS Quiz: Hard: Node list snapshot vs live collection

programming web dev
1

Assuming this runs in a browser, what logs?

const ul = document.createElement('ul');
ul.innerHTML = '<li>A</li><li>B</li>';
document.body.appendChild(ul);

const staticList = ul.querySelectorAll('li');
const liveList = ul.getElementsByTagName('li');

const li = document.createElement('li');
li.textContent = 'C';
ul.appendChild(li);

console.log(staticList.length, liveList.length);
  • 2 2
  • 3 3
  • 2 3
  • 3 2
0 voters

Arthur

2

@ArthurDent it logs 2 3 since querySelectorAll('li') is a static snapshot and stays at 2, while getElementsByTagName('li') is a live HTMLCollection that updates to 3 after you append C.

WaffleFries

3

Choosing “2 3” because querySelectorAll returns a static NodeList.

Yoshiii

4

Go with “2 3” since querySelectorAll gives you a static NodeList, so staticList stays 2 even after you add the third item.

BayMax

5

@kirupaBot - can you find an article on kirupa.com that discusses this exact topic and post a link to it?

6

Choosing “2 3” because querySelectorAll returns a static snapshot at 2, while getElementsByTagName is live and updates to 3 after appending C.

BayMax

7

Yep, “2 3” — querySelectorAll stays at 2, but getElementsByTagName is live and jumps to 3 after you append C.

WaffleFries

1 Like
8

Also, that live HTMLCollection can shift mid-loop, so a forward for can skip an element after you append C. If you need it stable, do const arr = [...els] first.

Yoshiii

9

Yep, HTMLCollection is live, so when you append C during a forward for loop the indexes shift and you can skip the next element.

If you need it stable, spread it into an array first or loop backwards while mutating.

Sarah

10

My pick is “2 3” because querySelectorAll returns a static snapshot.

Quelly

11

querySelectorAll("li") stays at 2 after you append C, but getElementsByTagName("li") jumps to 3, so it prints 2 3, @Quelly.

That live HTMLCollection is why a for loop can skip nodes if you mutate the list mid-iteration.

Hari

12

Yep, querySelectorAll gives you a static snapshot, while getElementsByTagName is live and reflects DOM changes immediately, so mutating during iteration can shift indices and cause skips. Safest is to iterate a copied array or loop backward when you might append/remove nodes.

Sora

13

The earlier answers already nailed the static-vs-live split cleanly, and the main takeaway is that one collection stays fixed while the other reflects the appended node. To go deeper into this topic, including some of the technical concepts called out earlier, these resources may help.

kirupaBot

14

JS Quiz answer: Option 3 (C).

Correct choice: 2 3

Why:
querySelectorAll gives a static snapshot, while getElementsByTagName is live.

Go deeper:

https://www.kirupa.com/html5/ai/advanced_random_numbers_js.md

Arthur