如何删除具有 class 分配的 H1？

Question

我有一个使用主题创建一些页面的 WordPress 站点。 不幸的是，它在我无法编辑的位置创建了一个 H1（在这种情况下只有文本“主页”），我想在另一个文本块位置添加我自己的 H1。 我想以编程方式删除第一个 H1，我可以使用此代码为 H1（我通过将其更改为“body”构建的示例页面）执行此操作。 （我将 i 设置为 0 以仅替换第一个实例）：

<script>
    const hTwos = document.querySelectorAll('h1');
    for (let i = 0; i < hTwos.length; i++) {
       hTwos[0].outerHTML = hTwos[i].outerHTML.replace(/h1/g,"body");
    };
</script>

但是，当有一个 class 分配给 H1 时，代码不会删除它吗？ 有没有办法使用 jscript 从页面中删除<h1 class="header-section__title">Home</h1>的 HTML 代码？

任何帮助将不胜感激。

Answer 1

您可以 select 第一个然后使用classList删除 class 和textContent更改文本，如：

 const firstH1 = document.querySelectorAll('h1')[0]; firstH1.classList.remove('header-section__title'); firstH1.textContent = 'My edited title';

 <h1 class='header-section__title'>Test 1</h1> <h1>Test 2</h1> <h1>Test 3</h1>

参考：

• 元素类列表
• 节点文本内容

Answer 2

您可以使用remove方法从 DOM 中删除元素。

如果您只对第一个结果采取行动，那么使用querySelectorAll方法和循环结果也是没有意义的。 只需使用querySelector方法，它只返回第一个结果。

const h1 = document.querySelector('h1');
if (h1) { h1.remove(); }

注意：这将从 DOM 中完全删除元素及其内容。 如果您只想将其更改为不同的标签，则需要替换元素，如此答案所示：

const h1 = document.querySelector('h1');
const newEl = document.createElement('div');
newEl.innerHTML = h1.innerHTML;
h1.parentNode.replaceChild(newEl, h1);