如何获取使用 DOM 而不是 HTML 创建的元素？

Question

我尝试使用document.getElementsByClassName ，但是当我这样做时，它给了我一个这样的元素集合：

HTMLCollection(2)
0: button#1.remove
1: button#2.remove
length: 2
2: <unreadable>
__proto__: HTMLCollection

当我尝试遍历它时，HTML 集合中没有任何内容。 我还试图找到 HTML 集合的长度，但它说它是 0。这些按钮也是使用 JavaScript 创建的。 使用 HTML 创建的按钮我可以遍历。

    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('submit-note').addEventListener('click', add, false);
    document.getElementById('clear').addEventListener('click', clear, false);
    document.getElementById('copy').addEventListener('click', copy, false);
    updateNotes();
    chrome.storage.onChanged.addListener(updateNotes);
    document.addEventListener('keydown', function(event) {
        if (event.keyCode == 13) {
          add();
        }
      });
    var elements = document.getElementsByClassName('remove');
    console.log(elements);
    console.log(elements.length);
    for (item of elements) { 
        console.log(item);
      } 
})

function updateNotes() {
    document.getElementById("note-container").innerHTML = "";
    chrome.storage.local.get(['notes'], function (result) {
        var curNotes = result.notes;
        console.log(curNotes)
        if (curNotes) {
            for (var i = 0; i < curNotes.length; i++) {
                var parsedDate = new Date(JSON.parse(curNotes[i].date))
                var hour = parsedDate.getHours().toString() + ":" + parsedDate.getMinutes() + "am";
                if (parsedDate.getHours() > 12) {
                    hour = parsedDate.getHours() - 12;
                    hour = hour.toString() + ":" + parsedDate.getMinutes() + "pm";
                }
                
                var greatNote = document.createElement("div")
                var fullNote = document.createElement("div")
                var deleteContianer = document.createElement("div");

                var para = document.createElement("p");
                var node = document.createTextNode(curNotes[i].note);
                para.appendChild(node);

                var date = document.createElement("p");
                var dateNode = document.createTextNode(`${parsedDate.getMonth() + 1}/${parsedDate.getDate()}/${parsedDate.getFullYear()} - ${hour}`);
                date.appendChild(dateNode);

                fullNote.appendChild(para);
                fullNote.appendChild(date);

                var remove = document.createElement("button")
                remove.innerHTML = "D";
                remove.id = curNotes[i].id.toString();
                deleteContianer.appendChild(remove);
                
                var element = document.getElementById("note-container");
                greatNote.appendChild(fullNote);
                greatNote.appendChild(deleteContianer);
                element.appendChild(greatNote);

                para.classList.add('note-text');
                date.classList.add('date-text');
                fullNote.classList.add('full-note');
                remove.classList.add('remove');
                greatNote.classList.add('great-note')
            }
        }
    })
}

Answer 1

这是我的第一条评论：

当您调用 updateNotes() 时，它正在调用异步 function 并且它的回调创建了您要查找的.remove class 元素。 所以当调用console.log(elements.length)，几行之后......异步回调还没有执行。

我忘了说的是在某处添加new Promise() 。

所以你必须在updateNotes()前面添加await因为那是你需要等待的地方。 但它必须是 promise，否则它被认为是已经解决的 promise ......并且不会等待。 请参阅等待文档。

所以这是我要尝试的（为了清楚起见，我跳过了几行）：

async function functionName (){
  // ...
  await updateNotes();
  // ...
}

async function updateNotes() {
  return new Promise( resolve =>{
  
    document.getElementById("note-container").innerHTML = "";
    await chrome.storage.local.get(['notes'], function (result) {
      // ...
    }
  })
}