无法遍历JavaScript动态创建的HTML元素问题求助

问题根源 #

你在页面加载完成时就执行了const entries = document.querySelectorAll('li');，此时页面中的<ul>是空的，所以entries是一个空的静态NodeList。NodeList是DOM状态的快照，不会随后续DOM更新自动同步，哪怕你后来动态添加了LI元素，entries依然是空的。

解决方案 #

要获取最新的LI元素集合，需要在动态创建元素之后再执行查询操作，或者直接从父元素<ul>中获取子节点，这样更高效。

修改后的代码示例 #

const form = document.querySelector('#firstForm');
const data = document.querySelector('#info');
const list = document.querySelector('#list');
const para = document.querySelector('#live');

form.addEventListener("input", function (e) {
    e.preventDefault();
    console.log("======");
    console.log(`${data.value}`);
    const input = data.value;
    const newLI = document.createElement('LI');
    newLI.innerText = input;
    para.innerText = input;
    list.append(newLI);
    console.log("======");
    
    // 方案1：在元素创建后重新查询DOM
    const entries = document.querySelectorAll('li');
    const listArr = Array.from(entries);
    
    // 方案2：直接从父元素ul中获取子节点（性能更优）
    // const listArr = Array.from(list.children);
    
    // 这里可以添加遍历逻辑，比如打印验证
    console.log('当前LI元素数量：', listArr.length);
});

额外说明 #

• document.querySelectorAll()返回的静态NodeList与element.children返回的HTMLCollection不同：前者是快照，后者是动态集合（会随DOM变化自动更新），但HTMLCollection只包含元素节点，不包含文本节点等。
• 如果后续需要对新创建的LI元素绑定事件，推荐使用事件委托，直接给父元素<ul>绑定事件，无需逐个给LI绑定。

内容的提问来源于stack exchange，提问作者LukeCodes