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

我试图使用

document.getElementsByCassName

，但当我这样做时，它给了我一个如下元素的集合：

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

HTMLCollection（2）
0:按钮#1.移除
1:按钮#2.取下
长度：2
2: 
__原型：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')
            }
        }
    })
}

document.addEventListener（'DOMContentLoaded'，函数（）{
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'，函数（事件）{
如果（event.keyCode==13）{
添加（）；
}
});
var elements=document.getElementsByClassName（'remove'）；
控制台日志（元素）；
console.log（elements.length）；
对于（元素项）{
控制台日志（项目）；
} 
})
函数updateNotes（）{
document.getElementById（“注释容器”）.innerHTML=“”；
chrome.storage.local.get（['notes']，函数（结果）{
var curNotes=result.notes；
console.log（curNotes）
如果（注意事项）{
对于（变量i=0；i12）{
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）；
子节点（节点）段；
var日期=document.createElement（“p”）；
var dateNode=document.createTextNode（`${parsedDate.getMonth（）+1}/${parsedDate.getDate（）}/${parsedDate.getFullYear（）}-${hour}`）；
date.appendChild（dateNode）；
全注.儿童（第6段）；
完整注释。附录子项（日期）；
var remove=document.createElement（“按钮”）
remove.innerHTML=“D”；
remove.id=curNotes[i].id.toString（）；
deleteContianer.appendChild（移除）；
var元素=document.getElementById（“注释容器”）；
greatNote.appendChild（fullNote）；
greatNote.appendChild（deleteContianer）；
元素。追加子元素（greatNote）；
段落classList.add（'note-text'）；
date.classList.add（'date-text'）；
fullNote.classList.add（'full-note'）；
remove.classList.add（'remove'）；
greatNote.classList.add（'great-note'）
}
}
})
}

这是我的第一条评论：

当您调用updateNotes（）时，它正在调用该异步函数，并且正是它的回调创建了您要查找的.remove类元素。所以当调用console.log（elements.length）时，在。。。异步回调尚未执行

我忘记告诉你的是在某处添加

newpromise（）

因此，您必须在

updateNotes（）

前面添加

wait

，因为这是您需要等待的地方。但它必须是一个承诺，否则它被认为是一个已经解决的承诺。。。我不会再等了。看

下面是我要尝试的（为了清晰起见，我跳过了几行）：

---

这回答了你的问题吗？--当您调用

updateNodes（）

时，它正在调用该异步函数，并且正是它的回调创建了

。删除您要查找的
类元素。因此，当调用
console.log（elements.length）
时，在。。。异步回调尚未执行。请在
函数updateNotes（）前面尝试
async
，
updateNotes（）前面尝试
await
；
@louyspatricebesette感谢您的帮助，不幸的是，当我添加wait和async时，没有任何更改。我将第5行更改为wait updateNotes（）；我将第20行更改为async函数UpdateNodes（）{。我还在第20行添加了async，因为函数需要异步才能在其中包含Wait。还有什么我可以尝试或缺少的吗？我添加了您建议的新承诺，但没有任何更改。这就是我现在所做的：async函数UpdateNodes（）{返回新承诺（async resolve=>{document.getElementById（“note container”）.innerHTML=“”；wait chrome.storage.local.get（['notes']，函数（结果）{//…}}）
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) {
      // ...
    }
  })
}