Web浏览器中动态添加修改HTML页面代码的问题分析

客官°小女子只卖身不卖艺 2022-06-17 08:13 108阅读 0赞

引言：在Web的世界里，浏览器加载页面，展示给用户最终的内容，可是最终展示的HTML代码与服务器上存储的代码一致吗？

1.  xpath为什么不能正常工作？

XPath是用来快速定位页面元素的方式和方法，忽然有一天，发现在页面中截取的XPath在代码的匹配中是无法工作的，那问题出在哪里呢？

页面地址：http://www.66ip.cn/

截取匹配页面中的IP地址，基于Chrome浏览器自带的开发者工具，我们截取到某一个匹配的XPath路径为：

//*[@id="main"]/div/div[1]/table/tbody/tr[2]

接下来，需要在代码中使用该xpath来匹配这个路径内容：

from lxml import etree
    from random
    
    url = "http://www.66ip.cn"
    pattern = '//*[@id="main"]/div/div[1]/table/tbody/tr'
    
    r = requests.get(url)
    tree = etree.HTML(r.text)
    nodes = tree.xpath(pattern)
    
    print("node length: %s" % len(nodes))

期望应该可以匹配出实际的tr元素个数的，但是实际的情况是nodes的长度为０，　那问题出在哪里呢？

2.  问题分析

首先怀疑是否是XPath有问题，仔细检查了一边提取过程，没有问题。

难道读取的页面内容和实际在浏览器中看到的内容不一致吗，网站是否有做其他的处理？　按照这个思路，提取了一下响应的内容：

提取响应对象中的text属性，r.text中的内容，查看其中的内容，发现其中是有期望匹配的内容的，但是为什么不能匹配成功呢？

可能的答案只有２个：　要么xpath有问题，要么响应的文件与浏览器中的内容不一致？

xpath的提取是由浏览器自身来提取的，所以应该没有问题，那只能是浏览器中看到的内容与实际在代码中响应的内容不一致，那就对比一下内容吧，对比一下有了发现：

在浏览器中的页面片段：

在代码中实际获取的代码片段如下：

不同之处是<tbody>在实际的代码中是不存在，只是在浏览器展示的过程中，浏览器自行添加上去的，结果导致提取的XPath路径与实际的代码无法匹配，最终无法获取到正确的匹配结果。

３．问题解决

修改xpath的路径，将tbody移除掉之后，重新执行代码即可正确内容了。

４.  延展分析

为了简化这个问题，做另一个简单的HTML页面，在浏览器上查看起显示的代码：

编辑器中的HMTL代码：

<html>
       <head>
         <title>hell world</title>
       </head>
       <body>
          <table>
              <tr>
                 <td>who like it</td><td>No one really Care.</td>
                 <td>Sky Net</td><td>helloworld</td>
              </tr>
              <tfoot>abce</tfoot>
          </table>
       </body>
    </html>

浏览器中的显示效果：

![Center][]

可以看到在浏览器中，自行添加了tbody的子标签，包装tr的内容；tfoot的内容跑到了上面去了，而tfoot的内容为空。是不是非常的诡异呀？

上述代码在Firefox/Chrome中测试过，情况相同，应该是浏览器执行的处理标准。

５．总结

浏览器为了更好的展示来自服务器的HMTL代码，自行做了相应的调整，在进行页面的代码分析之时，需要注意某些标签其实是浏览器在解析执行代码之时，自行添加上取的，不是实际的页面内容。

[Center]: /images/20220617/79743cbdf72f4f0c8d1d2c2f09f96df7.png