Question

我需要从元素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});
        }

Answer 1

在你的html中是#list还是使用javascript注入？如果是前者，您可以使用DOMContentLoaded event（＃1）等待加载html。如果它是由您控制的javascript函数注入的，则可以实现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中的变化（＆＃39;突变＆＃39;）。每次检测到特定目标节点的更改时，它都会触发。

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

Answer 2

您可以按如下方式使用setTimeout

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

3000 - ＆gt; 3secs

您可以提供所需的时间。

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

2 个答案: