在DOM中創建的元素上的MutationObserver之后，子級的訪問延遲

Question

好，大家好，我在這里的第一篇文章:)

我會盡量保持清晰，因為遇到的問題只是...（英語不是我的母語，對不起，如果抱歉）

我在一個網站上工作，一段時間后用戶不活動，出現了一個聊天框。 它在一開始就沒有出現在DOM中，也沒有與簡單的CSS類一起出現。 它在DOM中使用ID“ mychatcontainer”創建了一個新的塊div，因此要捕獲它，我在代碼下面使用了一個突變觀察器（它並不完美，我還沒有完成，但是可以完成工作我現在需要:)）

var target = document.getElementById('page13621');
var observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    if (mutation.addedNodes[0].id === "mychatcontainer") {
      console.log(mutation.type);
      console.log(mutation.addedNodes);
      console.log(mutation.addedNodes[0]);
      console.log(document.getElementById("mychatcontainer"));      
      console.log(this.document.getElementById("mychatcontainer"));
    }
  });    
});
var config = { attributes: false, childList: true, characterData: true, subtree: true };
observer.observe(target, config);

這是console.log的結果

如您所見，它僅顯示

<div id="mychatcontainer"></div>

沒有接觸兒童的可能，因此困擾我的那部分。

而如果我使用瀏覽器控制台手動進行操作，則可以獲得所有信息以及對兒童的訪問權限！

手動結果

• 因此，這里的第一個問題是我遺漏了一點嗎？

我要引起您注意的第二件事是：昨天，當我在個人網絡上嘗試我的代碼時，console.log可以訪問子級，但是只有在第一次嘗試時，然后我重新修飾頁面時，才會出現相同的問題， 禁止兒童進入

• 第二個問題是什么？ 很瘋狂...

感謝您的關注，希望有人可以幫助我:)

Answer 1

好的，即使我不喜歡，我也找到了解決方案，我想我沒有選擇的余地。

正如您在下面看到的那樣，我在1.2秒內添加了setTiemout函數，我不能遺憾地減少了該時間，但是最后我可以訪問子元素。

var target = document.getElementById('page13621');
var observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    if (mutation.addedNodes[0].id === "#ID_of_created_block") {
      //add a setTiemout function
      myFunction();
    }
  });    
});
var config = { attributes: false, childList: true, characterData: true, subtree: true };
observer.observe(target, config);

var myFunction = function() {
  setTimeout(function(){
    // Here add your code, in my exemple it was my console.log
  }, 1200);
}

有人可以確認我，在現有DOM與創建的DOM之間存在同步時間嗎？ 這解釋了這個1.2秒的延遲。

給開發人員的提示，不要在用戶體驗期間在DOM中創建新元素。 首先創建全部，然后隱藏或顯示。 這樣，立即接觸兒童就可以了。

感謝您的關注，歡迎您改善我的解決方案：)