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

时间:2015-02-27 01:30:01

标签: javascript html content-script dom-traversal

这是一个稍微开放的问题,但我希望有人可以提供帮助。这是我想要做的。

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

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

  1. 抓取document.body.getElementsByTagName(“*”),然后尝试一次处理其中一些元素。缺点是我最终得到了包含父母和孩子的页面的所有元素的列表,所以我最终在相同的元素上调用API两次

  2. 抓住document.body.childnodes,然后沿着每个子节点工作。这是行不通的,因为一些子节点往往太大而最终溢出API。

  3. 所以我的开放式问题是这样的 - 如果你必须遍历网页上任何页面的DOM并用另一块文本替换所有文本,那么最好的方法是什么?

2 个答案:

答案 0 :(得分:0)

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

你之前曾经和jquery合作过吗?它是建立在javascript之上的。会更容易进入并抓住你感兴趣的“文本”。

“。text()”如果你去jquery路线,可能就是你要找的东西:

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>

答案 1 :(得分:0)

您可以使用Reactjs进行dom更新并提高性能。