Javascript 从尚不在DOM中的元素获取文本

我需要从元素IDed“list”中获取文本，但是当页面第一次加载时，该元素还不存在，它需要3秒钟才能出现，因此如果我使用以下代码：

var lists = document.getElementById("list").textContent;
console.log(lists)

我得到一个错误，上面写着TypeError:document.getElementById（…）为null 当元素出现时，我如何才能获得文本

更新

document.addEventListener("DOMContentLoaded", function(event) {
// Select the node that will be observed for mutations
var parentOfMyList = document.body;

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            var lists = document.getElementById("list").textContent;
            console.log(lists)
            console.log(parentOfMyList)
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
observer.observe(parentOfMyList, config);   
});

不同的方法

function fuckobserver() {
            var fuckobs = new MutationObserver(function (mutations, observer) {
                $.each(mutations, function (i, mutation) {
                    var lists = document.getElementById("topcmm-123flashchat-sound-messages-contents").textContent;
                    console.log(lists)
                    });
                });
            var parentOfMyList = document.body;
            fuckobs.observe($(parentOfMyList)[0], {childList: true, subtree: true});
        }

        if (document.body.length) {
            // body is already in the DOM
            fuckobserver();
        } else {
            // body is not in the DOM yet, add an observer to detect its addition
            new MutationObserver(function (mutations, outineObserver) {
                if (document.body.length) { // body is finally in the DOM
                    outineObserver.disconnect();
                    fuckobserver();
                }
            }).observe($(document.body)[0], {childList: true, subtree: true});
        }

---

您可以使用setTimeout，如下所示

setTimeout(function(){ 
    var lists = document.getElementById("list").textContent;
    console.log(lists);    
 }, 3000);

3000-->3秒

您可以提供所需的时间

是html中的

#list

还是使用javascript注入的？如果是前者，则可以使用（#1）等待html加载。如果由您控制的javascript函数注入，则可以实现（#2）。如果您无法控制javascript函数（例如，第三方库或外部脚本），则可以使用（#3）

#1 DOMContentLoaded

这将等待浏览器告诉脚本它已完成加载HTML。将作业和日志按如下方式包装：

document.addEventListener("DOMContentLoaded", function(event) {
    var lists = document.getElementById("list").textContent;
    console.log(lists)
});

#2回拨

使用这种方法，基本上可以传递一个将在另一个函数末尾执行的函数

// add callback parameter
function createList (callback) {
   // code that creates the list element you want to log
   callback()
}

// put a function that console.logs your element into the parameter 
createList(function () {
    var lists = document.getElementById("list").textContent;
    console.log(lists)
});

#3 MutationObserver（取自MDN，稍加修改）

MutationObserver是一个相对较新的API，用于监视DOM中的更改（“突变”）。它将在每次检测到特定目标节点的更改时激发

// Select the node that will be observed for mutations
var parentOfMyList = document.body;

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            if (mutation.target.id === 'topcmm-123flashchat-sound-messages-contents') {
                // do something with your element mutation.target.id

            }
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
observer.observe(parentOfMyList, config);

---

使用这不是一个好的解决方案。你只是在猜测加载DOM需要多长时间。实际上很简单，很好，但是我刚刚发现元素不会出现在计时器上，而是出现在用户点击上，这使得它无法使用，但谢谢你。我想，它的javascript注入了，我会尝试你的每一种方法。如果你不能编辑注入列表的脚本，那么您很可能需要MutationObserver方法。如果您不能控制函数，并且在文档准备就绪时不会加载该函数，则无法真正实现回调。如果您需要有关实现的帮助，请随时询问：）我使用MutationObserver.observe的#3方法得到此错误：TypeError:Argument 1不是一个对象。我认为问题是父对象也没有加载。我可以改为观察body吗？当然，只需使用

document.querySelector（'body'）

而不是

document.getElementById（'listParent'）

作为您的parentOfMyList