Question

我试图弄清楚如何获取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&amp;sa=U&amp;ved=0ahUKEwiU__rUy_jhAhWIHzQIHTrGBzIQFghLMAo&amp;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>

Answer 1

我无法重现您的问题，在我的情况下，源代码显示的内容与document.documentElement.innerHTML完全相同。因此，我真的不知道为什么在这个特定示例中您会遇到这个特定问题。

尽管如此，页面的源代码也经常与文档的innerHTML无关。

innerHTML至少有2个错误：

它显示了可能会修改DOM的JS执行结果。

例如，这里您有示例React App的源代码。

<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（）。

Answer 2

Google的HTML标签比您要查找的要复杂得多，但是我想您想要这样的东西

x = document.querySelectorAll('.g')

x.forEach(function(element) {
    console.log(element.outerHTML);
});

Answer 3

在我看来，页面的某些部分似乎是通过客户端脚本动态生成的，并且该脚本存储在Google以外的服务器端。因此，您可能必须解决CORS政策问题。因此，“ document.documentElement.innerHTML”将仅显示最初编写的要在客户端显示的页面的静态元素，而保留动态生成其他元素的脚本。

Answer 4

返回的HTML或XML片段是根据元素的当前内容生成的，因此返回的片段的标记和格式很可能与原始页面标记不匹配。

for more detail

JavaScript：document.documentElement.innerHTML未显示所有元素

4 个答案: