javascript - 更快地替换所有 dom 元素中的文本的方法？

Question

我正在尝试替换标签之间的所有文本，我想知道这样做的最快方法。

一个例子是尝试用任意字符串 helloWorld 替换所有文本，这样:

<div>
    <div>
        RandomText1
        <div>
            RandomText2
        </div>
    </div>
</div>

变成这样:

<div>
    <div>
        helloWorld
        <div>
            helloWorld
        </div>
    </div>
</div>

我目前的做法是:

• 在 DOM 上进行深度优先搜索 (DFS)
• 对于每个元素，解析并确定哪部分是文本，哪部分是元素。
• 对于文本部分替换它。

这对我来说真的很慢，尤其是尝试对大型文档执行此操作并且必须多次重复该过程。有没有更快的方法？

Answer 1

不需要解析每个元素来查找文本节点，递归遍历childNodes即可元素的属性

var newText = 'hello world';
function replaceTextNodes(node) {
  node.childNodes.forEach(function(el) {
    if (el.nodeType === 3) {  // If this is a text node, replace the text
      if (el.nodeValue.trim() !== "") { // Ignore this node it it an empty text node
        el.nodeValue = newText;
      }
    } else { // Else recurse on this node
      replaceTextNodes(el);
    }
  });
}

var onClick = replaceTextNodes.bind(null, document.querySelector('#container'));
document.querySelector('#replace').addEventListener('click', onClick);

<div id='container'>
  <div>
    RandomText1
    <div>
      RandomText2
      <ul>
        <li>RandomText3</li>
      </ul>
    </div>
  </div>
</div>
<button id="replace">Replace</button>