Hello，親愛的小夥伴們，歡迎浏覽“使用CefSharp和Javascript實作網絡爬蟲”。
本篇是第2篇，介紹在實作爬蟲過程中會用到的Javascript和C#主要知識點。在使用CefSharp和Javascript實作網絡爬蟲過程中，我使用到的C#和Javascript知識主要包括三個方面：一是Javascript的Dom操作；二是CefSharp中Javascript和C#之間的調用和互動；三是C#委托使用，用于接收到資料後的回調處理。
網絡爬蟲采用Javascript的DOM操作來抓取目标資料，并通過CefSharp提供的Javascript和C#互動方法，把目标資料傳遞給C#代碼進行處理。下面我将分别進行記錄，分享給感興趣的小夥伴。
一、Javascript原生DOM操作
HTML通過浏覽器解析後形成DOM樹，DOM中每個 HTML标簽都是一個節點元素，包括屬性、方法、子孫節點。Javascript有一套操作HTML的DOM程式設計接口，通過DOM程式設計接口能夠操作到每個節點元素(即HTML标簽)，支援增、删、改、查操作。
1、查找擷取節點
查找擷取HTML節點元素，可能通過document的get方法，或者使用document 的querySelector()和querySelectorAll()方法實作。
方法1：通過document的get方法
var elem=document.getElementById(idName) ；//通過id号擷取元素，傳回一個元素對象
var elem=document.getElementsByClassName(className) ；//通過class擷取元素，傳回元素數組
var elem document.getElementsByTagName(tagName)；//通過标簽名擷取元素，傳回元素數組
以上方法可以串聯使用，例如：
// 先定位ID為idName的節點，再傳回其内部所有名稱為tagName的節點：
var elem = document.getElementById(idName).getElementsByTagName(tagName);
// 先定位ID為idName的節點，再傳回其内部所有class包含className的節點：
var elem = document.getElementById(idName).getElementsByClassName(className);
方法二：使用document 的querySelector()和querySelectorAll()方法
var elem = document.querySelector('# idName ')；// 通過querySelector擷取id為idName的節點
var elem = document.querySelectorAll('div')；// 通過querySelectorAll擷取所有的div節點
2、擷取/設定元素的屬性值
通過document的get方法，或者使用document 的querySelector()和querySelectorAll()方法，得到節點對象後，可進一步可擷取節點的屬性值。
elem.parentNode；//擷取目前元素的父節點
elem.chlidren；//擷取目前元素子節點
elem.chilidNodes；//擷取目前元素子節點
elem.firstChild；//擷取目前元素的第1個子節點
elem.lastChild；//擷取目前元素的最後1個子節點
elem.innerHTML //擷取元素的内部文本
elem.innerText； //擷取目前元素的内部文本值，隻是文本内容，不包括html代碼
此外，通過getAttribute、setAttribute可以實作對屬性值的擷取或設定。
elem.getAttribute(attributeName)；//傳入屬性名稱，擷取對應屬性的屬性值
elem.setAttribute(attributeName,attributeValue)； //傳入屬性名稱，以及屬性值
二、jQuery操作HTML的DOM
對于支援jQuery的站點，可以直接使用jQuery友善地進行DOM操作。
jQuery對Javascript的DOM操作方法進行了封裝，通過jQuery 選擇器能夠對 HTML 節點元素或節點元素組進行操作。jQuery 選擇器通過節點的 ID、類、類型、屬性、屬性值等查找/選擇HTML 節點元素，jQuery 選擇器以$符号開頭。
1、查找擷取節點
(1)元素選擇器
使用節點名選取元素，例如在頁面中選取所有
元素：$('div')
(2)#id選擇器
使用 HTML 元素的 ID屬性選取指定的元素，例如在頁面中選取id='myid'的
元素：$('#myid')
(3).class 選擇器
使用 class 查找元素，例如在頁面中選取class='myclass'的
元素:$(".myclass")
2、擷取/設定元素的屬性值：
通過attr() 、html()、val()方法設定或傳回被選元素的屬性值：
$(selector).attr(attribute)； //擷取被選元素的屬性值
$(selector).attr(attribute,value)；//設定被選元素的屬性和值
$(selector).html()；//擷取或設定被選元素的内容 (innerHTML)
$(selector).val()；//擷取或設定被選元素的值
三、DOM操作實踐
使用Chrome浏覽器，打開以下網址：
https://www.toutiao.com/c/user/3601650358695789/#mid=1652236062202883
(1)按“F12”打開 “開發者工具”視窗，在“Elements”面闆可以看到頁面的DOM結構。
(2)點選左上角"箭頭"圖示，在頁面中選擇文章标題，在“開發者工具”中可以看到被選中元素高亮顯示。
(3)在“開發者工具”中“右鍵”點選高亮顯示内容，在彈出菜單中選擇Copy。
(4)選擇“Copy selector”
(5)點選開發者工具的“Console”選項，在視窗中進行如下輸入：
a) 輸入"//" ，然後鍵盤按下"Ctrl"+"V" 粘貼上述操作擷取的HTML元素選擇字元串，或者在輸入行“點選右鍵”，選擇“粘貼(P)”，粘貼上述操作擷取的HTML元素選擇字元串，字元串為：
#wrapper > div.left > div:nth-child(2) > div > div:nth-child(3) > div > ul > li > div > div.normal.rbox > div > div.title-box > a
b) 輸入 var elem=$("XXX")，其中XXX是"Ctrl"+"V" 粘貼的字元串
c) 輸入 elem回車，即可獲得我們選中的文章标題元素
d) 輸入 elem.href ，即可獲得文章标題的URL連結位址
e) 輸入 elem.innerText，即可獲得文章标題字元串。
這樣我們就獲得了文章标題和對應的URL位址，後面通過CefSharp中Javascript和C#之間的調用和互動方法，可将标題和對應的URL位址傳遞給C#進行處理存儲、打開連結擷取文章詳細内容等。本篇介紹了Javascript的DOM操作，後面我将對C#委托使用、CefSharp中Javascript和C#之間的調用和互動進行介紹，敬請指正。