Ajax调用后无法访问新元素（Vanilla JS）

Question

我有一个用项填充列表的ajax调用，但是调用完成后，我无法访问DOM中的列表项以添加事件监听器，console.log输出一个空的nodeList。

我的HTML ：

<ul class="list"></ul>

我的JS文件：

let list = document.querySelector('.list'),
listitem = document.querySelectorAll('.list-item'),
content;

function showItems() {

    let url = 'https://swapi.co/api/people';
    fetch(url)
    .then(function(response) {
        return response.json();
    }).then(function(data) {
        let results = data.results;
        results.forEach(item => {
            content = `<li class="list-item"><a href="#">${item.name}</a></li>`;
            list.innerHTML += content;
        });

        //This displays the entire content
        console.log(list);

        //This doens't find the child elements
        console.log(listitem);

    }).catch(function(err) {
        console.log(err);
    });
}

showItems();

奇怪的是，如果我在console.log list显示了新创建的元素，但是如果我尝试在console.log中直接显示list-item ，则结果为NodeList(0)并且我认为如果调用未完成完整列表也不应显示列表项。

这里有一个测试： https : //jsfiddle.net/magutj8L/1/

注意：我不想使用JQuery。

Answer 1

querySelectorAll返回一个静态 NodeList 。 如果你打电话document.querySelectorAll ，它将返回任何匹配的元素在你叫它时存在-它不会自动更新，包括新的元素。 （这可以说比情况逆转时更直观-在迭代过程中，您真的不希望变量发生突变，这是错误的常见来源）

填充列表后，您应该再次选择元素：

const newListitems = document.querySelectorAll('.list-item');
console.log(newListitems);

请注意， getElementsByClassName是一个选项，它将返回一个实时 HTMLCollection添加的新元素将出现在该集合中，而无需再次选择它们：

listitem = document.getElementsByClassName('list-item')

但是，对于IMO，实时收集是不直观的，因此我不建议您使用依赖于此的逻辑。