一、Chrome 開發者工具的使用
chrome開發者工具
簡單介紹
Element：把Html文檔以DOM(Document Object Model)樹的形式呈現出來
Console：用來輸入命令的控制台，例如用XPath的命令查找相關html的元素
Sources: 網頁的目錄結構(代碼<css, html....>、資源文件等),可用於了解網頁的代碼設計的層次，及其使用css代碼等。
Other:https://www.cnblogs.com/Fang3s/p/3965231.html
二、XPath選擇Html元素
1.路徑表達式：
在開發者工具中Console界面使用$x工具函數：
使用Chrome獲取Xpath表達式
2.常見函數、及其表達式：
條件表達式：元素[條件表達式]
id為home的div標簽
div[@id = "home"]
text():獲取文本信息的函數
獲取id為firstHeading的h1標簽下span中的text
//h1[@id="firstHeading"]/span/text()
多個相同元素的數組選擇:img[]
選擇class屬性值為infobox的表格中的第一張圖片的url
//table[@class="infobox"]//img[1]/@src
邏輯運算and 和 contains()函數
contains可用來對屬性的選擇(匹配)contains(@屬性關鍵字，"屬性值")
and就是與
獲取class屬性包含ltr和skin-vector的任意元素內所h1中的文本
//*[contains(@class,"ltr") and contains(@class, "skin-vector")]//h1//text()
開頭固定的字符串匹配：starts-with(relative, base)
選擇class屬性以reflist開頭的div標簽中所有的url
//div[starts-with(@class, "reflist")]//a/@href
獲取頁面中每張圖片的URL
//img/@src
詳細XPath內容可參見W3cschool：http://www.w3school.com.cn/xpath/index.asp
3.XPath表達式使用的注意事項
- 避免使用數組索引(數值）
//*[@id="myid"]/div/div/div[1]/div[2]/div[1]/div[1]/a/img 例如廣告區域一旦在其增加一個div或減少一個div就可能照成上述表達式的數據索引不能匹配到 理想的信息，應該盡可能的使用id號或者class等屬性進行查找元素,提高代碼的魯棒性 //div[@class="thumbnail"]/a/img - 類並沒有那么好用：布局類通常是通過css來改變頁面的外觀，一旦布局發生變化，可能class屬性值就會發生變化
//div[@class="thumbnail"]/a/img 當頁面布局發生變化時，信息就變為 //div[@class = "priview green"]/a/img - 有意義的面向數據的類比具體面向布局的類更好：有意義的數據類的有效期相對較長且不會輕易改變
- ID可靠性最佳
文章引用：
- 《精通Python爬蟲框架Scrapy》
- W3cschool：http://www.w3school.com.cn/xpath/xpath_functions.asp
- https://www.cnblogs.com/Fang3s/p/3965231.html