javascript - 从尚未在 DOM 中的元素获取文本

Question

我需要从 ID 为“列表”的元素中获取文本，但是当页面首次加载时该元素尚不存在，它需要大约 3 秒才能出现，所以如果我使用此代码:

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

我收到一个错误提示 TypeError: document.getElementById(...) is 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});
        }

Answer 1

#list 是在您的 html 中还是使用 javascript 注入(inject)的？如果是前者，您可以使用 DOMContentLoaded event (#1) 等待 html 加载完成。如果它是由你控制的 javascript 函数注入(inject)的，你可以实现 callback。 (#2)。如果您无法控制 javascript 函数(例如第三方库或外部脚本)，您可以使用 MutationObserver (#3)。

#1 DOMContentLoaded

https://caniuse.com/#search=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，稍作修改)

https://caniuse.com/#search=mutationobserver

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);