通过 JavaScript 获取页面的 HTML 源并覆盖它答案

【问题标题】：Getting HTML source of a page by JavaScript and overwriting it通过 JavaScript 获取页面的 HTML 源并覆盖它
【发布时间】：2013-07-08 15:11:30
【问题描述】：

我正在使用 Javascript 为浏览器编写扩展程序。如何获取整个 HTML 源代码并重新编写？

我需要更改该来源中的一些字词并重新打开该页面。

【问题讨论】：

适用于任何浏览器。主要用于 Chrome
您可以使用document.getElementsByTagName("html")[0].innerHTML 读取源代码并使用document.write 重写页面，如果这是您的要求。但是，我建议您使用 document.getElementById("idOfTheElement").innerHTML="new string" 之类的东西来更改文档中的几个单词，而不是重写整个页面（如果您知道元素的 id/class）。
我不同意下面的答案。您应该尝试在文本节点级别进行字符串替换，而不强制重新加载整个页面（尤其是 CSS）。 This is actually very simple and I will leave a small snippet example although it is not pure JS
非常感谢。所以，我要这样做：我将通过MyString=document.getElementsByTagName("html")[0].innerHTML 获取整个源代码，然后应用我的功能来更改它，并通过以下方式重写代码：document.documentElement.innerHTML = changeString (Mystring); will it work?
@Alexander 实际上你是对的，我只需要更改文本，但我需要更改整个文本，从标题页到结尾。我不明白 TEXT_NODE，那是什么？

标签： javascript html dom

【解决方案1】：

在 javascript 中，您可以尝试以下操作：

var source = document.documentElement.outerHTML;

...并获取 doctype 使用：

var doctype = document.doctype;

来源：Get the whole document's html with JavaScript/JQuery

如果有帮助，我还发现了这篇关于在 Chrome 扩展程序中做同样事情的帖子：

Getting the source HTML of the current page from chrome extension

【讨论】：

【解决方案2】：

您可以通过以下方式获取整个页面的来源：

oldSource = document.getElementsByTagName("html")[0].innerHTML;

然后将整个页面替换为：

document.write(newSource);

或者，如果您想替换页面上的少数元素，请使用以下方法之一：

如果你知道元素的id：

oldText = document.getElementById("idOfElement").innerHTML;
document.getElementById("idOfElement").innerHTML = newText;

如果你知道元素的class：

oldText = document.getElementsByTagName("classOfElement")[0].innerHTML;
document.getElementsByTagName("classOfElement")[0].innerHTML = newText;

（其中0 表示您正在寻找页面上具有特定类名的第一个元素）

如果你知道元素的标签名：

oldText = document.getElementsByClassName("tagName")[0].innerHTML;
document.getElementsByClassName("tagName")[0].innerHTML = newText;

（其中0 表示您正在寻找页面上具有特定标签名称的第一个元素）

或者，您可以使用jQuery selectors， 例如：

oldText = $("#idOfElement").html();
oldText = $(".classOfElement").html();
oldText = $("tagName:nth-child(1)").html();

$("#idOfElement").html(newText);
$(".classOfElement").html(newText);
$("tagName:nth-child(1)").html(newText);

:nth-child(1) 表示您正在寻找页面上具有特定标签名称的第一个元素。如果有多个具有相同类名的元素，您也可以在搜索类时使用它。

【讨论】：

【解决方案3】：

尝试这样的方法来获取页面源：

document.documentElement.innerHTML

这要改变它：

document.documentElement.innerHTML = '<body>I like pie</body>'

document.documentElement 是页面上的<html> ... </html> 元素，innerHTML 将给出它的 HTML。

【讨论】：

如果我想从头开始呢？整个页面
@hurremdev 不幸的是，JavaScript 无法做到这一点。
@hurremdev 是的，标题在head 元素中。 html 元素包含 head。