将 class 的所有元素的标签交换为 JavaScript

Question

var f = document.querySelector('.example');
var g = document.createElement('h2');
for (let i = 0; i < f.length; i++) {
    g.innerHTML = f[i].innerHTML;
    f[i].parentNode.replaceChild(g, f[i]);
}

<ul>
<li class="example">Hi</li>
<li class="example">Hi</li>
<li class="example">Hi</li>
<li class="example">Hi</li>
<li class="example">Hi</li>
<li class="example">Hi</li>
<li class="example">Hi</li>
</ul>

这是我想做的事情：

之后我想使用 JavaScript 对 WordPress 主题进行可访问性调整。

在以下情况下，我想用标签 <h2> 覆盖 class“.example”的 all 元素标签（目前它们是<div>)

这里的代码示例我只到达了第一个元素（我知道），但我想用新标签“覆盖”所有：

var f = document.querySelector('.example');
var g = document.createElement('h2');
g.innerHTML = f.innerHTML;
f.parentNode.replaceChild(g, f);

我该怎么做，我已经尝试过类似的方法：

var f = document.querySelector('.example');
var g = document.createElement('h2');
for (let i = 0; i < f.length; i++) {
    g.innerHTML = f[i].innerHTML;
    f[i].parentNode.replaceChild(g, f);
}

但是没用。我觉得应该很简单，但我是新手

谢谢:)

Answer 1

每次循环都需要创建一个新的 <h2> 元素，而不是重复使用相同的元素 g。你需要使用 document.querySelectorAll() 来获取所有 .example 元素，这样你就可以遍历它们。

var f = document.querySelectorAll('.example');
for (let i = 0; i < f.length; i++) {
  var g = document.createElement('h2');
  g.innerHTML = f[i].innerHTML;
  f[i].parentNode.replaceChild(g, f[i]);
}

<ul>
  <li class="example">Hi</li>
  <li class="example">Hi</li>
  <li class="example">Hi</li>
  <li class="example">Hi</li>
  <li class="example">Hi</li>
  <li class="example">Hi</li>
  <li class="example">Hi</li>
</ul>

将 class 的所有元素的标签交换为 JavaScript

Exchange the tags of all elements of a class with JavaScript

javascript

arrays

queryselector