MutationObserver 是一个用于监听 DOM 变化的 API，可以用来观察元素的插入、删除和属性的变化。如果你想拦截所有元素链接（如 <a> 标签）的修改，你可以使用 MutationObserver 来观察 DOM 中的节点变更，并在这些变更发生时执行相应的逻辑。
下面是一个示例，展示如何使用 MutationObserver 拦截并修改所有 <a> 元素链接：
// 创建一个 MutationObserver 实例const observer = new MutationObserver((mutationsList) => {for (const mutation of mutationsList) {// 如果添加了新节点if (mutation.type === 'childList') {mutation.addedNodes.forEach(node => {// 确保它是一个元素节点if (node.nodeType === Node.ELEMENT_NODE) {// 检查新的子节点中是否有 <a> 标签const links = node.getElementsByTagName('a');for (let link of links) {interceptLink(link);}}});}// 如果修改了属性（例如 href）if (mutation.type === 'attributes' && mutation.attributeName === 'href') {interceptLink(mutation.target);}}});// 定义拦截链接的方法function interceptLink(link) {const originalHref = link.href;// 修改链接（例如，将所有链接都重定向到某个 URL）link.href = 'https://example.com';console.log(`Intercepted a link: ${originalHref} -> ${link.href}`);}// 配置观察者选项const config = { childList: true, subtree: true, attributes: true };// 开始观察整个文档observer.observe(document.body, config);// 还可以处理现有的 <a> 标签const existingLinks = document.getElementsByTagName('a');for (let link of existingLinks) {interceptLink(link);}
说明
创建
MutationObserver：通过传入回调函数来创建MutationObserver实例，该回调函数会在观察到变化时被调用。配置选项：
childList: 观察子节点的添加或移除。subtree: 包括整个 DOM 树中的所有后代。attributes: 观察属性的变化，这里我们特别关注href属性。
拦截链接：定义了
interceptLink函数，用于获取原始链接并对其进行修改。这里将每个<a>标签的 href 属性设置为固定的网址，但你可以根据需要进行不同的处理。处理现有链接：最后一段代码遍历已有的
<a>元素并进行初步拦截，以确保在页面加载时也能处理这些元素。
通过上述方式，你就可以利用 MutationObserver 有效地拦截和处理页面上所有 <a> 标签链接的变化。
内容由零声教学AI助手提供，问题来源于学员提问
