MutationObserver是一个JavaScript API,用于监测DOM(文档对象模型)中的变化。它可以观察DOM树的特定部分,并在发生更改时触发回调函数。以下是使用MutationObserver检测DOM中添加的<li>
标记,并在<iframe>
中获取数据文件名的步骤:
let observer = new MutationObserver(callback);
function callback(mutationList, observer) {
// 在这里处理DOM变化
}
observe()
方法开始观察指定的DOM节点。let targetNode = document.querySelector('ul'); // 监测<ul>元素中的变化
let config = { childList: true }; // 监测子节点的变化
observer.observe(targetNode, config);
function callback(mutationList, observer) {
mutationList.forEach(mutation => {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if (node.nodeName === 'LI') {
// 在这里执行<li>标记添加后的操作
let iframe = document.querySelector('iframe');
let fileName = iframe.getAttribute('data-file-name');
console.log(fileName);
}
});
}
});
}
以上代码会在DOM中添加<li>
标记后,在<iframe>
元素中获取数据文件名并打印到控制台。
注意:在使用MutationObserver时,要确保DOM元素已经加载完毕,并且选择正确的目标节点以及配置选项,以满足具体需求。
有关腾讯云的相关产品和介绍链接地址,可以参考腾讯云官方文档:https://cloud.tencent.com/document/product/400
领取专属 10元无门槛券
手把手带您无忧上云