我正在尝试弄清楚如何获取 html 的所有元素。例如，如果我加载这个 google search ，我会看到这个结果:
查看页面特定部分的源代码，我看到了这个:
<a href="https://www.macworld.com/article/3331839/iphone-2019-rumors-everything-you-need-to-know.html" onmousedown="return rwt(this,'','','','38','AOvVaw07dY5FgPEzcYsd8enm-9gs','','2ahUKEwicoNi4yPjhAhVdCTQIHVxICj4QFjAlegQIABAB','','',event)">
<h3 class="LC20lb">iPhone 2019 rumors: Everything you need to know | Macworld</h3><br><div class="TbwUpd">
<cite class="iUh30">https://www.macworld.com/.../iphone-2019-rumors-everything-you-need-to-know.ht...</cite></div></a>
但是如果我使用 document.documentElement.innerHTML，我会看到:
<div class="g"><h3 class="r">
<a href="/url?q=https://www.macworld.com/article/3331839/iphone-2019-rumors-everything-you-need-to-know.html&sa=U&ved=0ahUKEwiU__rUy_jhAhWIHzQIHTrGBzIQFghLMAo&usg=AOvVaw2C3PdwxIaeNuukMVSwC-5g">
<b>iPhone 2019</b> rumors: Everything you need to know | Macworld</a>
</h3><div class="s"><div class="hJND5c" style="margin-bottom:2px">
我的问题:为什么源代码和 document.documentElement.innerHTML 的输出之间存在差异？
此外，使用 JavaScript 时它看起来像这样:
<a href="https://www.macworld.com/article/3331839/iphone-2019-rumors-everything-you-need-to-know.html" onmousedown="return rwt(this,'','','','38','AOvVaw07dY5FgPEzcYsd8enm-9gs','','2ahUKEwicoNi4yPjhAhVdCTQIHVxICj4QFjAlegQIABAB','','',event)">
<h3 class="LC20lb">iPhone 2019 rumors: Everything you need to know | Macworld</h3><br><div class="TbwUpd">
<cite class="iUh30">https://www.macworld.com/.../iphone-2019-rumors-everything-you-need-to-know.ht...</cite></div></a>
最佳答案
我无法重现您的问题，在我的例子中，源代码显示与 document.documentElement.innerHTML 完全相同。所以，我真的不知道为什么在这个特定的例子中你有这个特定的问题。
尽管如此，页面的源代码通常可能与文档的 innerHTML 无关。
innerHTML 至少有 2 个错误:
- 它显示了可能修改 DOM 的 JS 执行结果。
例如，这里有一个示例 React 应用程序的源代码。
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
这是它产生的输出:
在这种情况下，源代码与 innerHTML 完全不同，因为我们生成新的东西是用 js。
但是，如果我们用 JS 修改现有标记，情况也会有所不同，Google 的结果页面很可能就是这种情况。
- innerHTML 显示浏览器解析的内容，而不是从服务器发送的内容。
例如，如果我像这样从服务器发送了错误的 HTML:
<head>...</head>
<!DOCTYPE html>
<html lang="en">
<body>...</body>
</html>
然后 document.documentElement.innerHTML 会像这样很好地输出我的错误标记:
<head>...</head>
<body>...</body>
这可能不会影响 Google 的页面，但当您基于文档的 innerHTML 构建某些内容时，它也值得考虑。
因此，如果您真正想要的是页面的源代码，您可能只需要直接从服务器获取它并从响应中获取文本即可。
在客户端 JS 中，您可以使用 fetch API 来做到这一点.唯一的问题是您可能无法从不同于 google.com 的来源执行此操作，因为您可能会遇到 CORS 策略问题。
从服务器端，您肯定会有一个工具来执行 GET 请求。因此，您可能会在 NodeJs 中使用 http.get 或在 PHP 中使用 file_get_contents() 之类的东西。
关于JavaScript:document.documentElement.innerHTML 未显示所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55927984/