javascript - 一次性替换 DOM 中的一组特定元素

Question

假设我有一个由该 html 表示的 DOM 树。

<div id="root">
  <div>
    <p>hoge</p>
    <span>fuga</span>
  </div>
  <div>
    <span>piyo</span>
    <div>
      <span>foobar</span>
    </div>
  </div>
</div>

如果我想替换所有<span>由 <button> 提供，我怎样才能实现它？

const replaceElements = () => {
  const page = document.getElementById("root")
  const elements = document.getElementsByTagName('span');
  elements.forEach(item => ???)
}

Answer 1

它不断获取第一个 span 并将其转换为按钮，直到通过将元素替换为 Span 内部 HTML 周围的按钮标签而不再有 span 为止。查看片段。 (在 Chrome 76 中测试)

const replaceElements = () => {
  const elements = document.getElementsByTagName('span');
  while (elements.length > 0) {
  const item = elements[0];
    item.outerHTML = '<button>' + item.innerHTML + '</button>';
  }
}

const replaceElements = () => {
  const elements = document.getElementsByTagName('span');
  while (elements.length > 0) {
  const item = elements[0];
    item.outerHTML = '<button>' + item.innerHTML + '</button>';
  }
}
replaceElements();

<div id="root">
  <div>
    <p>hoge</p>
    <span>fuga</span>
  </div>
  <div>
    <span>piyo</span>
    <div>
      <span>foobar</span>
    </div>
  </div>
</div>