如何解决仅当具有特定ID的元素可用时才执行功能
我有一个JavaScript函数,只有当具有特定ID的元素在DOM中可用时才应执行。
解决方法
好吧,如果我正确理解了您的需求,我相信这应该可以解决
const elementToObserve = document.querySelector("#parentElement");
const lookingFor = '#someID';
const observer = new MutationObserver(() => {
if (document.querySelector(lookingFor)) {
console.log(`${lookingFor} is ready`);
observer.disconnect();
}
});
observer.observe(elementToObserve,{subtree: true,childList: true});
您将要观察元素预期出现的位置的父级。将subtree
和childList
选项设置为true时,它将观察那里的更改,并在发现任何差异时触发回调。而且,您可以在该回调中签入要查找的元素是否在页面上。
按照文档制作一个有效的示例并非易事,DOM documentation可以提供有用的说明。
事实证明,MutationObserverInit dictionary
不是“对象类型”,而只是用于描述用于观察更改的选项对象的接口描述语言(IDL)术语-仅需要一个对象对象。
FWIW这是一个示例,用于检测添加带有“ certainId”的新节点或将现有节点的ID更改为“ certainId”。
"use strict";
const target = document.getElementById("target");
const observer = new MutationObserver( checkChanges);
const certainId = "certainId";
function checkChanges(changeList,fromObserver) {
console.log("Callback 2nd argument is the observer object: %s",fromObserver === observer);
for( let change of changeList) {
if( change.type == "attributes") {
if( change.target.id === certainId) {
console.log("id has been changed: ",change.target);
break;
}
}
else if( change.type == "childList") {
for( let node of change.addedNodes) {
if( node.id==certainId) {
console.log("target was added: ",node);
break;
}
}
}
}
}
observer.observe( target,{
subtree: true,attributeFilter: ["id"],childList: true
});
// test
function changeId() {
if( document.getElementById("test1")) {
test1.id = "certainId";
}
}
function insertSpan() { // button click
if( document.getElementById("test2")) {
test2.innerHTML = '<span id="certainId">span#certainId<\/span>';
}
}
<div id="target">
<div id="test1">
div#test1 (oriinally)
</div>
<div id="test2">
div#test2
</div>
</div>
<button type="button" onclick='changeId()'>Set id value</button> OR
<button type="button" onclick="insertSpan()">insert new element</button>
可以单击摘要中的两个测试按钮,并生成具有重复ID的元素-最好在实践中避免。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。