异步获取数据后脚本中元素列表为空但Chrome控制台正常，如何解决？

问题 #

刚入门async-await函数，正在JSONPlaceholder网站做实践，已经成功获取到数据，但给所有<a>标签添加事件监听器时遇到问题：用getElementByClassName或querySelectorAll获取的元素列表在脚本里是空的，但在Chrome控制台能正常获取。推测是访问元素的代码在async函数执行完成前就运行了，试过把脚本放在HTML body末尾、把获取元素的代码放在async函数末尾，都没用。

当前使用的脚本（posts.js）：

let catalogItems = document.querySelector('[data-catalog-items]');
let postItems = [...catalogItems.getElementsByClassName('post-item')];
console.log(postItems);

async函数代码：

class HTTPResponseError extends Error {
    constructor(response) {
        super(`HTTP Error Response: ${response.status} ${response.statusText}`);
        this.response = response;
    }
}

const getPostItems = async ({limit, page}) => {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`);
        if (!response.ok) {
            throw new HTTPResponseError(response);
        }
        const total = +response.headers.get('x-total-count');
        const items = await response.json();
        return {items, total};
    } 
    catch (err) {
        console.error(err);
    }
}

解决方案 #

1. 严格遵循执行顺序：渲染完成后再获取元素 #

核心问题是获取元素的代码早于动态DOM元素生成的时间——哪怕脚本放在body末尾，async函数是异步执行的，数据请求和DOM渲染都需要时间，而你当前的获取元素代码是同步执行的，自然拿不到还没生成的元素。

正确做法：在getPostItems获取到数据后，先完成DOM渲染（把帖子插入到[data-catalog-items]容器），紧接着在渲染完成的代码之后，再去获取post-item元素并绑定事件。

示例代码：

// 定义渲染函数，负责把数据转为DOM插入页面
const renderPostItems = (items) => {
    const catalogItems = document.querySelector('[data-catalog-items]');
    items.forEach(item => {
        const postItem = document.createElement('div');
        postItem.className = 'post-item';
        postItem.innerHTML = `<a href="#post-${item.id}">${item.title}</a>`;
        catalogItems.appendChild(postItem);
    });
};

// 初始化流程：请求→渲染→绑定事件
const init = async () => {
    const { items } = await getPostItems({ limit: 10, page: 1 });
    // 第一步：渲染数据到页面
    renderPostItems(items);
    // 第二步：渲染完成后再获取元素并绑定事件
    const postItems = document.querySelectorAll('[data-catalog-items] .post-item');
    postItems.forEach(item => {
        const link = item.querySelector('a');
        link.addEventListener('click', (e) => {
            e.preventDefault();
            console.log('点击帖子:', item.querySelector('a').textContent);
        });
    });
};

// 启动流程
init();

2. 用事件委托简化逻辑（更推荐） #

如果后续有分页加载、动态新增帖子的需求，每次渲染后重新绑定事件会很繁琐。直接用事件委托把事件绑定到父容器上，不管元素什么时候生成，都能触发事件：

// 提前给父容器绑定事件，不管子元素什么时候生成都能生效
const catalogItems = document.querySelector('[data-catalog-items]');
catalogItems.addEventListener('click', (e) => {
    // 判断点击的是目标<a>标签
    if (e.target.tagName === 'A' && e.target.closest('.post-item')) {
        e.preventDefault();
        console.log('点击帖子链接:', e.target.getAttribute('href'));
    }
});

// 正常执行数据请求和渲染
const init = async () => {
    const { items } = await getPostItems({ limit: 10, page: 1 });
    renderPostItems(items);
};

init();

为什么之前的尝试没用？ #

• 把脚本放body末尾：仅保证父容器[data-catalog-items]存在，但异步请求还没返回，动态生成的post-item还没插入DOM，所以获取不到。
• 把获取元素的代码放async函数末尾：如果只是放在getPostItems的return之前，那时候数据刚拿到，还没渲染到DOM里，自然也拿不到元素，必须放在渲染完成之后。

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