遍历DOM和替换文本的最佳方法

Best approach to traverse the DOM and replace text

本文关键字：最佳 方法 文本 替换 DOM 遍历      更新时间：2024-06-21

这是一个有点开放的问题，但我希望有人能帮忙。这就是我要做的。

我正在编写一个浏览器扩展，它解析页面的所有HTML，调用API，等待响应，然后用API响应的文本替换页面上的所有文本，而不更改页面的格式。

我尝试了几种不同的方法来解析页面的HTML-

  1. 抓取document.body.getElementsByTagName（"*"），然后尝试一次处理其中的一些元素。缺点是，我最终得到了一个页面所有元素的列表，其中包括父母和孩子，所以我最终两次调用同一元素上的API

  2. 获取document.body.childnodes，然后向下查找每个子节点。这不起作用，因为有些子节点往往太大，最终会溢出API。

所以我的开放式问题是——如果你必须遍历网络上任何页面的DOM，并用另一块文本替换所有文本，那么最好的方法是什么？

您可能需要使用javascript编写自己的函数，才能进入并获取您感兴趣的每个元素文本。

你以前用过jquery吗？它是基于javascript构建的。这会让你更容易进入并获取你感兴趣的"文本"。

如果你走jquery路线，".text（）"可能就是你想要的：

http://api.jquery.com/text/

var innerTxt = $('#elementWithText').text();
$('span').text(innerTxt);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="elementWithText">Hello, how are you</p>
<br>
<p>The text in the paragraph above is: </p>
    
<span></span>

您可以使用Reactjs进行dom更新和更快的性能。

相关文章：