使用querySelectorAll获取动态生成按钮返回空节点列表求助

问题根源 #

你的代码里，document.querySelectorAll('.image-btn')是同步执行的，但getEmployees()是异步请求，要等接口返回数据后才会调用gallery生成DOM元素。同步代码会先于异步回调执行，所以执行querySelectorAll时，那些按钮还没被渲染到页面上，自然返回空节点列表。

解决方法1：将获取元素的逻辑放到异步流程内 #

把获取按钮的代码放在then的回调里，确保DOM生成后再执行：

async function getEmployees() {
    let response = await fetch("http://localhost:3000/img")
    let data = await response.json()
    return data;
}

// 在then回调里先执行gallery生成DOM，再获取按钮
getEmployees().then((data) => {
    gallery(data);
    let imageBtn = document.querySelectorAll('.image-btn');
    console.log(imageBtn);
})

function gallery(data) {
    data.map(e => {
        const { images, quote } = e;
        imagescontainer.innerHTML += `<div class="image-box">
            <a class="btn play-music-btn image-btn" id="playbtn">Play Songs</a>
            <div class="img">
                <img src="${images}" alt="">
            </div>
            <h3 class="image-text">${quote}</h3>
        </div>`
    })
}

解决方法2：使用事件委托（推荐） #

如果要给按钮绑定交互事件，事件委托更可靠——不用等待DOM生成，直接给父元素绑定事件，通过事件冒泡捕获子元素的操作：

// 给父容器绑定点击事件，监听.image-btn的点击
imagescontainer.addEventListener('click', function(e) {
    if (e.target.classList.contains('image-btn')) {
        // 这里写按钮的点击逻辑
        console.log('按钮被点击：', e.target);
    }
});

async function getEmployees() {
    let response = await fetch("http://localhost:3000/img")
    let data = await response.json()
    return data;
}

getEmployees().then((data) => gallery(data))

function gallery(data) {
    data.map(e => {
        const { images, quote } = e;
        imagescontainer.innerHTML += `<div class="image-box">
            <a class="btn play-music-btn image-btn" id="playbtn">Play Songs</a>
            <div class="img">
                <img src="${images}" alt="">
            </div>
            <h3 class="image-text">${quote}</h3>
        </div>`
    })
}

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