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是一个选项，它将返回 live HTMLCollection-添加的新元素将出现在集合中，而无需再次选择它们：

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

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

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

1 个答案: