當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
生活随笔
收集整理的這篇文章主要介紹了
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
0.參考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
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 '>] View Code1.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'>] View Code1.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 ---------------------------------------------------------------------------------------------------- 0-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公里 View Code1.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.彩蛋（前端都這么直白？！）
?
轉載于:https://www.cnblogs.com/my8100/p/js_qichezhijia.html
總結
以上是生活随笔為你收集整理的[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HVV之WIFI蜜罐反制红队
- 下一篇： vim安装时报错:Depends:vim