JavaScript URL参数选择器失效：无法修改offset页面标题文本

可能的原因及对应方案 #

1. 脚本执行时机过早，DOM未完全加载 #

你的脚本可能在目标元素渲染到页面之前就执行了，导致querySelector找不到元素。

解决办法：

• 把脚本放在页面底部（</body>标签之前），确保DOM加载完成后再执行。
• 或者用DOM加载事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  if (window.location.search.includes("offset")) {
    const targetHeading = document.querySelector('#block-638064e4cae107c42e91b95e h1');
    if (targetHeading) {
      targetHeading.innerHTML = 'More Posts';
    }
  }
});

2. 元素选择器不准确 #

检查目标元素的实际ID或层级是否和你写的一致：

• 打开浏览器开发者工具（F12），在offset页面中搜索#block-638064e4cae107c42e91b95e，确认这个容器下确实存在h1元素，且ID没有变化（有些平台会动态生成ID）。
• 如果ID不对，重新复制正确的选择器替换。

3. 页面内容是动态加载的 #

如果offset页面的内容是通过AJAX或其他异步方式加载的，DOM加载完成后目标元素可能还没出现。这种情况需要监听元素的加载：
可以用MutationObserver来监听DOM变化，当目标元素出现时修改文本：

const observer = new MutationObserver(function(mutations) {
  if (window.location.search.includes("offset")) {
    const targetHeading = document.querySelector('#block-638064e4cae107c42e91b95e h1');
    if (targetHeading) {
      targetHeading.innerHTML = 'More Posts';
      observer.disconnect(); // 找到元素后停止监听
    }
  }
});

// 监听整个文档的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

4. 缓存或浏览器控制台测试 #

• 先在浏览器控制台直接运行document.querySelector('#block-638064e4cae107c42e91b95e h1')，看是否能返回元素。如果返回null，说明选择器或元素加载有问题；如果能返回元素，直接修改innerHTML看是否生效，排查脚本执行时机的问题。
• 清除浏览器缓存后重新测试，避免旧页面缓存导致脚本不执行。

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