如何獲取使用 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) {
      // ...
    }
  })
}