判断元素是否存在于DOM中是Javascript中经常遇到的一个问题,特别是在进行DOM操作和事件处理的时候。下面是两种常见的判断元素的方法:
通过使用document.querySelector()方法来查找元素,如果返回值不为null,那么表示找到了该元素,否则表示没有找到该元素。
var element = document.querySelector('#myElement');
if(element){
//元素存在
}else{
//元素不存在
}
getElementById()方法可以通过DOM文档中元素的ID属性来获取该元素,如果返回值不为null,那么表示找到了该元素,否则表示没有找到该元素。
var element = document.getElementById('myElement');
if(element){
//元素存在
}else{
//元素不存在
}
在HTML文档加载完成后,在JavaScript中访问DOM元素之前,DOM元素必须先被创建出来。因此,在某些情况下,我们需要在实时的DOM中判断元素的存在,而不是等待DOM文档中的所有元素都被加载完成之后再进行判断。下面是两种可以在实时的DOM中判断元素存在的方法:
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中");
});
通过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中");
});
本文链接:http://task.lmcjl.com/news/10390.html