javascript - 纯JS检查页面上元素是否存在

Question

我正在尝试用 Javascript 检测页面上是否存在某个元素 (#navDropDowns)，以确定用户是否已登录。该元素在加载时不存在，但稍后由 Salesforce 自己的 JS 事件添加。我的脚本也通过 Salesforce 的 JS 例程加载到页面中。

我一直在尝试使用 setInterval 并不断检查页面。令人惊讶的是，它总是失败(报告“注销”。但是，当我直接在浏览器控制台中运行它时，它报告“登录”。

(function wpSalesforce() {

    setInterval( function(){
        if ( document.getElementById('navDropDowns') !== null ) {
            console.log('logged in')
            document.body.className += ' ' + 'logged-in';
        } else {
            console.log('logged out')
        }
    }, 1000 );

})();

我尝试过各种版本，包括变量赋值，但一无所获。当它在浏览器控制台中工作时，就好像 setInterval 使用的是旧版本的 DOM。

我无法使用 jQuery 来实现此目的，它必须是纯 JS。

Answer 1

您可以输入 mutation observer在 navDropDowns 的父节点上。

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

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

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();