javascript判断元素存在和判断元素存在于实时的dom中的方法

判断元素是否存在于DOM中是Javascript中经常遇到的一个问题，特别是在进行DOM操作和事件处理的时候。下面是两种常见的判断元素的方法：

一、使用document.querySelector()

通过使用document.querySelector()方法来查找元素，如果返回值不为null，那么表示找到了该元素，否则表示没有找到该元素。

var element = document.querySelector('#myElement');
if(element){
    //元素存在
}else{
    //元素不存在
}

二、使用document.getElementById()

getElementById()方法可以通过DOM文档中元素的ID属性来获取该元素，如果返回值不为null，那么表示找到了该元素，否则表示没有找到该元素。

var element = document.getElementById('myElement');
if(element){
    //元素存在
}else{
    //元素不存在
}

三、实时的DOM中判断元素的存在

在HTML文档加载完成后，在JavaScript中访问DOM元素之前，DOM元素必须先被创建出来。因此，在某些情况下，我们需要在实时的DOM中判断元素的存在，而不是等待DOM文档中的所有元素都被加载完成之后再进行判断。下面是两种可以在实时的DOM中判断元素存在的方法：

1、使用MutationObserver()

MutationObserver()方法可以监控DOM树的变化，并在DOM树发生变化时触发回调函数。在回调函数中，我们可以进行元素的查找和判断。

//判断元素是否存在的函数
function checkElementExist(elementID, callback) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            //获取DOM树中的添加和删除节点列表
            var addedNodes = mutation.addedNodes;
            var removedNode = mutation.removedNodes;
            for (var i = 0; i < addedNodes.length; i++) {
                //查找新增元素中是否含有目标元素
                if (addedNodes[i].id === elementID) {
                    //回调函数
                    callback();
                    observer.disconnect();
                    return;
                }
            }
            for (var i = 0; i < removedNode.length; i++) {
                //查找删除元素中是否含有目标元素
                if (removedNode[i].id === elementID) {
                    observer.disconnect();
                    return;
                }
            }
        });
    });
    //开始监控DOM树的变化
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    });
};

//调用判断元素是否存在的函数
checkElementExist("myElement", function() {
    console.log("元素存在实时DOM中");
});

2、使用setInterval()

通过setInterval()方法定时检测元素是否存在实时的DOM中。在代码中，我们设定一个定时器，每过一段时间就去查找目标元素是否存在实时的DOM中，如果存在，则清除定时器，执行回调函数。

//判断元素是否存在的函数
function checkElementExist(elementID, callback) {
    var intervalID = setInterval(function() {
        //查找目标元素是否存在实时的DOM中
        var element = document.getElementById(elementID);
        if (element) {
            clearInterval(intervalID);
            callback();
        }
    }, 500);
};

//调用判断元素是否存在的函数
checkElementExist("myElement", function() {
    console.log("元素存在实时DOM中");
});