js分析汽_车_之_家 js生成css伪元素 hs_kw44

0.参考

0.1 Use with pseudo-elements

getComputedStyle can pull style info from pseudo-elements (for example, ::after, ::before, ::marker, ::line-marker—see spec here).

<style>
 h3::after {
   content: ' rocks!';
 }
</style>

<h3>generated content</h3> 

<script>
  var h3 = document.querySelector('h3');
  var result = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

0.2 手动设置伪元素信息

0.3 理论上应该是可以直接通过 js 读取伪元素 content 的。。。然而这里读取不到 ::before 的 content

1.初步抓取

1.1不加载js VS 加载js

1.2 requests仅见一张table

In [1]: import requests
   ...: from scrapy import Selector
   ...:
   ...:
   ...: url = 'https://car.autohome.com.cn/config/series/3170.html'
   ...: s = requests.Session()
   ...: s.verify = False
   ...: s.headers = {
   ...:     'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36'
   ...: }
   ...:
   ...: r = s.get(url)
   ...: sel = Selector(text=r.text)
   ...:
   ...: sel.css('table')
   ...:

Out[1]: [<Selector xpath='descendant-or-self::table' data='<table class="t1 txtCen" width="100%">\n '>]

1.3 selenium可见所有table

In [3]: from scrapy import Selector
   ...: from selenium import webdriver
   ...:
   ...:
   ...: url = 'https://car.autohome.com.cn/config/series/3170.html'
   ...: dr = webdriver.Chrome()
   ...: dr.get(url)
   ...: sel = Selector(text=dr.page_source)
   ...: sel.css('table')
   ...:

DevTools listening on ws://127.0.0.1:12968/devtools/browser/2e9adb31-7510-421f-ac13-835350af144e
Out[3]:
[<Selector xpath='descendant-or-self::table' data='<table class="t1 txtCen" width="100%">\n '>,
 <Selector xpath='descendant-or-self::table' data='<table cellspacing="0" cellpadding="0" c'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_side" cellspacing="0" cel'>,
 <Selector xpath='descendant-or-self::table' data='<table cellspacing="0" cellpadding="0" c'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_0" cellspacing="0" cellpa'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_1" cellspacing="0" cellpa'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_2" cellspacing="0" cellpa'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_3" cellspacing="0" cellpa'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_4" cellspacing="0" cellpa'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_5" cellspacing="0" cellpa'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_100" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_101" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_102" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_103" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_104" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_105" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_106" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_107" cellspacing="0" cell'>,
 <Selector xpath='descendant-or-self::table' data='<table id="tab_108" cellspacing="0" cell'>]

1.4 提取table信息

In [4]: for t in sel.css('table#tab_0'):
   ...:     print('@'*10)
   ...:     for row in t.xpath('.//tr'):
   ...:         print('-'*100)
   ...:         for col in row.xpath('.//th|.//td'):
   ...:             print(''.join(col.xpath('.//node()/text()').extract()), end='\t')
   ...:         print()
   ...:
@@@@@@@@@@
----------------------------------------------------------------------------------------------------
基本参数
----------------------------------------------------------------------------------------------------
厂      -       -       -       -       -       -       -       -       -       -       -       -
----------------------------------------------------------------------------------------------------
级别
----------------------------------------------------------------------------------------------------
能源类型        汽油    汽油    汽油    汽油    汽油    汽油    汽油    汽油    汽油    汽油    汽油    汽油
----------------------------------------------------------------------------------------------------
上市    2017.10 2017.10 2017.10 2017.10 2017.10 2017.10 2017.10 2017.10 2017.10 2017.10 2017.10 2017.10
----------------------------------------------------------------------------------------------------
(kW)    110     110     110     110     140     140     110     110     110     110     140     140
----------------------------------------------------------------------------------------------------
(N·m)  250     250     250     250     320     320     250     250     250     250     320     320
----------------------------------------------------------------------------------------------------
发动机  1.4T 150马力 L4 1.4T 150马力 L4 1.4T 150马力 L4 1.4T 150马力 L4 2.0T 190马力 L4 2.0T 190马力 L4 1.4T 150马力 L4 1.4T 150马力 L4 1.4T 150马力 L4 1.4T 150马力 L4 2.0T 190马力 L4 2.0T 190马力 L4
----------------------------------------------------------------------------------------------------
变速箱  7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合       7挡双离合
----------------------------------------------------------------------------------------------------
长*宽*高(mm)    4312*1785*1426  4321*1785*1426  4312*1785*1426  4321*1785*1426  4312*1785*1426  4321*1785*1426  4457*1796*1417  4462*1796*1417  4457*1796*1417  4462*1796*1417  4457*1796*1417  4462*1796*1417
----------------------------------------------------------------------------------------------------
车身结构        5门5座两厢车    5门5座两厢车    5门5座两厢车    5门5座两厢车    5门5座两厢车    5门5座两厢车    4门5座三厢车    4门5座三厢车    4门5座三厢车    4门5座三厢车    4门5座三厢车    4门5座三厢车
----------------------------------------------------------------------------------------------------
最高车速(km/h)  215     215     215     215     230     230     215     215     215     215     230     230
----------------------------------------------------------------------------------------------------
官方0-100km/h加速(s)    8.4     8.4     8.4     8.4     7.4     7.4     8.4     8.4     8.4     8.4     7.4     7.4
-----------------------------------------------------------------------------------------------------100km/h加速(s)        -       -       -       -       -       -       -       -       -       -       -       -
----------------------------------------------------------------------------------------------------
100-0km/h制动(m)        -       -       -       -       -       -       -       -       -       -       -       -
----------------------------------------------------------------------------------------------------
工信部(L/100km) 5.7     5.7     5.7     5.7     6.2     6.2     5.6     5.6     5.6     5.6     6.1     6.1
----------------------------------------------------------------------------------------------------
(L/100km)       -       -       -       -       -       -       -       -       -       -       -       -
----------------------------------------------------------------------------------------------------
整车    三10公里        三10公里        三10公里        三10公里        三10公里        三10公里        三10公里        三10公里        三10公里        三10公里        三10公里        三10公里

1.5 对比可见提取table信息不全

2.问题分析

2.1 开发者工具显示 '商' 为CSS伪元素的content属性

2.2 使用正常浏览器硬性刷新未见CSS文件存在有效对应信息

2.3 检查发现class name存在规律：hs_kw数字_configyk

.hs_kw22_configyk::before {
content: "商";
}

.hs_kw44_configyk::before {
content: "一汽";
}

2.4 selector提取存在多个class name后缀，而且无法提取到其中文字

In [19]: sel = Selector(text=dr.page_source)

In [20]: sel.css('span[class*="hs_kw"]').extract()
Out[20]:
['<span class="hs_kw34_configyk"></span>',
 '<span class="hs_kw66_configyk"></span>',
...
 '<span class="hs_kw42_optionLA"></span>',
]

2.5 使用正常浏览器全局搜索 hs_kw 和 hs_kw22_configyk 和 configyk ，仅发现关联文件 3170.html

2.6 Sources面板对 3170.html 进行美化排版，复制到 notepad++ 搜索关键字定位到 js 代码段

继续搜索

2.7 复制其中一个代码片段到 Sources 面板作为 snippet，移除头尾 <script> </script>，添加断点

2.8 运行代码片段，发现可疑变量

2.9 根据关键字定位到相关函数（运气好的话），添加log语句，重新运行输出中间变量

3 完整代码

http://www.cnblogs.com/my8100/p/9028359.html

4 运行结果

5.彩蛋（前端都这么直白？！）

js分析汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before的更多相关文章

爬虫实战：汽车之家配置页面破解伪元素和混淆JS
本篇介绍如何破解汽车之家配置页面的伪元素和混淆的JS. ** 温馨提示:如需转载本文,请注明内容出处.** 本文链接:https://www.cnblogs.com/grom/p/9242156.ht ...
js如何控制css伪元素内容（before，after）
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after
在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...
使用JS控制伪元素的几种方法
一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...
如何使用JS操纵伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息.也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素. 伪类用于当已有元素处于的某个状态时 ...
js分析天_眼_查字体文件
0. 参考 js分析猫_眼_电_影字体文件 @font-face 1. 分析 1.1 定位目标元素 1.2 查看网页源代码 1.3 requests 请求提取得到大量错误信息对比猫_眼_电_影抓 ...
ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 使用ArcGIS进行空间分析 1.1 GIS分析基础 G ...
ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 入门案例分析在第一章里,我们已经对ArcGIS系列软件的体系结构有了一 ...
JS 动态加载脚本执行回调_转
关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

随机推荐

springdata jpa 原始sql的使用
MySQL——设置库中的表以奇数自增
语句 SHOW VARIABLES LIKE 'auto_inc%'; 查看auto_increment_increment的值是不是1,如果是就设置成2 ; 这样所有的表都会以奇数来自增了,因为这个 ...
sqlalchemy和pymysql通过ssh连接远程mysql服务器
首先需要一个模块sshtunnel,如果没有直接pip install sshtunnel 其实连个连接方式非常像: pymysql连接方式: import pymysql from sshtunne ...
Luogu P2057 [SHOI2007]善意的投票
题目链接 $Click$ $Here$ 考虑模型转换.变成文理分科二选一带收益模型,就一波带走了. 如果没有见过这个模型的话,这里讲的很详细. #include <bits/stdc++ ...
下拉框 -------> 初始化数据
在Web应用程序中开发编写功能时,时常用到获取数据库中的数据并将值初始化在HTML中的标签上. 1.Form from django.forms import Form from django.for ...
TLS调试微信
1.在微信中打开 X5 调试地址:http://debugx5.qq.com,信息标签,勾选打开TBS内核Inspector调试功能 2.在微信中打开 TBS 内核安装地址:http://debugx ...
学习python笔记协程
下面将一个经典的消费者和生产者的案例进行分析: import time def consumer(): r = '' while True: n = yield r if not n: return ...
.net 委托多线程实时更新界面
Thread thread = new Thread(() => { button2.Invoke(new EventHandler(delegate { button2.Enabled = t ...
Linux Shell远程执行命令
1.问题描述经常需要远程到其他节点上执行一些shell命令,如果分别ssh到每台主机上再去执行很麻烦,下边介绍shell命令远程执行的方法. 前提: 远程电脑之间已经配置ssh免密码登陆 2.脚本方 ...
torch画散点图
import torch from torch.autograd import Variable import torch.nn.functional as F import matplotlib.p ...

js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before