如何用JavaScript将指定类中的H1标签替换为H2标签

你原来的代码只能替换页面里第一个H1，还没法区分是不是在指定类容器内，下面是修正后的代码，能批量把.the-class里的所有H1换成H2，同时不影响页面其他H1：

// 精准选中目标类下的所有H1元素
const h1Elements = document.querySelectorAll('.the-class h1');

// 逐个处理每个匹配到的H1
h1Elements.forEach(h1 => {
  // 创建新的H2标签
  const h2 = document.createElement('h2');
  // 复制原H1里的所有内容
  h2.innerHTML = h1.innerHTML;
  // 保留原H1的样式类（避免替换后样式变了）
  h2.className = h1.className;
  // 用H2替换掉原来的H1
  h1.parentNode.replaceChild(h2, h1);
});

代码说明： #

• document.querySelectorAll('.the-class h1')只会抓目标类容器里的H1，不会碰页面标题这类外部H1
• 用forEach循环处理所有匹配的H1，实现批量替换
• 复制原H1的className，保证替换后样式和原来的H1一致（毕竟Webflow会给富文本标签加样式类）

测试用HTML示例： #

<h1>Don't change this</h1>
<div class="the-class">
  <h1>Replace this with h2</h1>
  <h1>Also replace this one</h1>
</div>

把这段JS代码加到Webflow页面的自定义代码区（建议放在</body>标签之前），就能自动处理CMS富文本里的H1标签了。

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