QuerySelector对存在于本地存储和可见DOM上的元素为null

Question

我有一个简单的表，在这个表中，每一行都添加了来自本地存储的数据(使用innerHTML)。每行包含一个编辑按钮。当我用类名querySelectAll编辑按钮时，它返回null，这没有意义。

这里，Total_Users是存储的对象数组，每个对象传递给addToUserList()，该应用包含按钮的innerHTML。加载文档后，显示数据，但querySelectorAll在搜索" editbutton "时返回null。由于数据是在DOM中呈现的，因此应该有几个按钮是我没有得到的结果…

// DOM
class Show {
static addToUserList(user) {
let list = document.querySelector('#table-body'); //just a table
let row = document.createElement('tr');
row.innerHTML = `<td>${user.name}</td>
<td>${user.email}</td>
<td>${user.phone}</td>
<td>${user.role}</td>
<td class="text-center mx-auto"> <i class="fa fa-edit text-success btn editButt" data-bs-toggle="modal" data-bs-target="#edit"></i> </td>`;
list.appendChild(row);
}
}
//Fill with previously stored data
document.addEventListener('DOMContentLoaded', Load_Users);
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);
})
}
// querySelector editButt
// find nothing here
let editElem = document.querySelectorAll('.editButt');
console.log(editElem);

Answer 1

可以尝试先选择"#table-body"，然后使用querySelectorAll()来搜索table元素。试试这样做:

let container = document.querySelector('#table-body');
let editElem = document.querySelectorAll('.editButt');

如果不工作，尝试使用老式的getElementsByClassName选择器，我有这个问题与querySelectorAll()之前，我最终使用这样的东西:

var editElem = document.getElementsByClassName('editButt');

如果这些都不适合你，我建议给你想要选择的元素添加一个id。这样你就知道你选择了那个特定的元素。

document.querySelectorAll() | MDN Web Docs

---

document.getElementsByClassName() | MDN Web Docs

---

Answer 2

您需要检查事件是否"DOMContentLoaded"已准备好，例如:

if (document.readyState === "complete" || document.readyState === "loaded") {
// document is already ready to go
// your query selector here: 
let editElem = document.querySelectorAll('.editButt');
console.log(editElem);
}

在这里详细检查这个问题的答案:

如何检测DOMContentLoaded是否被触发

Answer 3

在load_Users()函数内部，querySelector工作正常

function Load_Users(){
....
editElements();
deleteElements();
}
function editElements(){
let editElem = document.querySelectorAll('.editButt');
console.log(editElem.length);
...
}