Live NodeList vs Static NodeList

getElementsByName returns a live NodeList, meaning dynamically added elements will be added to the NodeList, but querySelectorAll doesn't.

HTML

<div>static div</div>
<input id="btn" type="button" value="click to see the difference" />

CSS

div {
    width: 200px;
    height: 20px;
    border: 1px solid red;
    padding: 1em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

JavaScript

function liveTest() {
    var tags = document.getElementsByTagName("div"); //getElementsByTagName, live! 
    var all = document.querySelectorAll("div"); //querySelectorAll, not live!
    
    var div = document.createElement("div");
    div.textContent = 'dynamic div';
    document.body.appendChild(div);
   
    var result = document.createElement("p");
    result.textContent = `tags.length = ${tags.length} and all.length= ${all.length}`
    document.body.appendChild(result);
}

var btn = document.getElementById("btn");
btn.addEventListener("click", liveTest);