JS如何获取未知id和class的元素值与textContent，实现多站点通用内容修改

场景1：匹配id/class包含指定关键词的元素 #

你示例中需要筛选所有id和titles相关的元素，直接使用CSS属性模糊选择器即可实现，不需要提前知道完整的id/class名称：

// 匹配所有id包含titles、或class包含titles的元素，多个规则用逗号分隔
const targetElements = document.querySelectorAll('[id*="titles"], [class*="titles"]');

// 遍历修改元素内容
targetElements.forEach(el => {
  el.textContent = '替换后的自定义内容';
});

可按需调整属性匹配规则：

• [attr^="关键词"] 匹配属性值以指定关键词开头的元素
• [attr$="关键词"] 匹配属性值以指定关键词结尾的元素
• [attr*="关键词"] 匹配属性值任意位置包含指定关键词的元素

场景2：匹配任意元素的文本内容（全站点通用，无需硬编码id/class） #

你提到的遍历文档的思路可行，但不要直接修改innerHTML，会破坏页面原有的事件绑定、样式结构。正确做法是遍历所有文本节点，仅修改文本内容，同时可以配合MutationObserver处理动态加载的内容：

// 自定义替换规则，支持字符串和正则匹配
const replaceRules = [
  { match: '要替换的原文本', replace: '替换后的新文本' },
  { match: /匹配的正则规则/g, replace: '替换后的新内容' }
];

// 递归遍历所有文本节点
function traverseTextNodes(node) {
  // 跳过不需要修改的标签
  if (['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME'].includes(node.tagName)) return;
  
  node.childNodes.forEach(child => {
    // 处理文本节点
    if (child.nodeType === Node.TEXT_NODE) {
      let text = child.textContent;
      replaceRules.forEach(rule => {
        text = text.replaceAll(rule.match, rule.replace);
      });
      if (text !== child.textContent) child.textContent = text;
      return;
    }
    // 递归遍历元素子节点
    if (child.nodeType === Node.ELEMENT_NODE) traverseTextNodes(child);
  });
}

// 页面加载完成后执行全量替换
window.addEventListener('load', () => traverseTextNodes(document.body));

// 监听DOM变化，处理动态加载的内容（比如无限滚动、异步渲染的内容）
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) traverseTextNodes(node);
    });
  });
});
observer.observe(document.body, { childList: true, subtree: true });

该方案不依赖任何站点的id、class规则，只要页面文本命中你设置的匹配规则就会自动替换，可在任意站点运行。

内容的提问来源于stack exchange，提问作者SubZero