简单的用户脚本导致其他页面元素停止工作[重复]

Question

所以我一直在尝试学习一些 javascript，并且一直在研究一个非常（非常）基本的用户脚本，它只是更改站点（不是我控制其源代码的站点）上链接的文本颜色。问题是，当脚本运行时，它改变了链接文本的颜色，链接仍然有效，但附近的一些功能元素完全停止工作（搜索栏预览、搜索按钮、配置文件下拉列表）。 我的脚本体无非是：

document.body.innerHTML= document.body.innerHTML.replace(/Advanced\n\s{1,}Search/,"\<span style\=\"color\: \#2898FF\"\> Advanced Search \<\/span\>");

我还尝试将脚本作为书签运行，以防用户脚本的运行方式/与之关联的元数据有任何问题，但不，同样的情况。 真的很感激一些帮助^^

Answer 1

当您这样做时，页面上的所有元素都会重新创建，因此页面上大多数 JavaScript 事件侦听器的更改将不再起作用：

document.getElementById('click').onclick = () => {
  console.log('Click!');
};

document.getElementById('replace').onclick = () => {
  console.log('Replace!');
  
  document.body.innerHTML= document.body.innerHTML.replace(
    /Advanced\n\s{1,}Search/,
    '\<span style\=\"color\: \#2898FF\"\> Advanced Search \<\/span\>'
  );
};

.as-console-wrapper {
  max-height: 45px !important;
}

<h1>
  Advanced
  Search
</h1>

<button id="click">Click me!</button>
<button id="replace">Replace HTML</button>

相反，找到您要更新的确切元素并更改它们的一些属性：

const h1 = document.querySelector('h1');

document.getElementById('click').onclick = () => {
  console.log('Click!');
};

document.getElementById('replace').onclick = () => {
  console.log('Replace!');
  
  h1.textContent = 'Advanced Search';
  h1.style.color = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta'][Math.round(Math.random() * 5)];
};

.as-console-wrapper {
  max-height: 45px !important;
}

<h1>
  Advanced
  Search
</h1>

<button id="click">Click me!</button>
<button id="replace">Replace HTML</button>