localStorage渲染的可见DOM元素存在，QuerySelector查询却返回null如何解决

问题根本原因 #

你写的document.querySelectorAll('.editButt')是同步执行代码，会在脚本加载解析完成后立刻运行，而你渲染按钮的Load_Users函数是绑定在DOMContentLoaded事件上触发的——这个事件要等整个HTML文档解析完成、所有静态DOM节点加载完毕才会执行，所以你执行查询的时候，本地存储里的数据还没被渲染成DOM元素，自然查不到对应节点。 #

解决方案 #

方案1：将查询逻辑放到元素渲染完成后执行 #

把查询操作放到Load_Users函数的末尾，等所有行和按钮都插入到DOM之后再执行查询：

function Load_Users() {
    let Total_Users;
    if (localStorage.getItem('Total_Users') === null) {
        Total_Users = [];
    } else {
        Total_Users = JSON.parse(localStorage.getItem('Total_Users'));
    }
    Total_Users.forEach(item => {
        Show.addToUserList(item);
    })
    // 所有元素渲染完成后再查询
    let editElem = document.querySelectorAll('.editButt');
    console.log(editElem);
}

方案2：使用事件委托绑定按钮事件（更推荐） #

如果你的最终目的是给编辑按钮绑定点击事件，不需要主动查询所有按钮，直接把事件绑定到已经存在的父元素#table-body上即可，后续动态新增的编辑按钮也能自动触发事件，不需要重复查询绑定：

document.querySelector('#table-body').addEventListener('click', e => {
    // 判断点击的是编辑按钮
    if (e.target.classList.contains('editButt')) {
        // 这里写编辑按钮的点击逻辑
        console.log('点击了编辑按钮', e.target);
    }
})

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