如果用JS查找网页中的CLASS元素并替换其内容？

1. 使用 querySelector 方法根据 class 为 ‘hiclass’ 来查找标题元素,并把它存储在 preplace 变量中。
2. 检查 preplace 是否存在,即是否找到了该标题元素。
3. 如果找到了,就用 innerHTML 属性替换其内容为’替换的内容’。
这样就可以实现简单的 DOM 操作,对指定的标题元素进行内容替换。
下面我用这段代码写一个例子来说明:
内容替换示例
我们的网页有一个内容:

<div class="hiclass">原内容</div>

通过JavaScript代码可以替换其内容:

const preplace = document.querySelector('.hiclass'); 

if (preplace) {
  preplace.innerHTML = '新的内容'; 
}

在代码执行后,页面上的内容将被替换为”新的内容”。
这展示了如何通过查询元素并修改 innerHTML 属性来实现 DOM 的内容替换(使用textcontent格式化标签)。可以应用于各种场景,如将网站的内容替换为用户输入的文本、根据数据渲染新内容到指定的容器等。
总体来说,这段代码演示了使用 JavaScript 修改 DOM 的简单实践,只需要 several 掌握 querySelector 获取元素,并通过 innerHTML 改变其内容即可实现元素内容替换。适合初学者作为 DOM 操作的学习示例。

以下是油猴脚本，增加了延迟加载。

// ==UserScript==
// @name         Replace Content
// @match        https://www.example.com/*
// ==/UserScript==

(function() {

// 在网页加载 6 秒后执行函数
setTimeout(function() {

const preplace = document.querySelector('.hiclass'); 

if (preplace) {
  preplace.innerHTML = '新的标题'; 
}

}, 6000); // 延迟 6000 毫秒,即 6 秒

})();