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#之间的调用和交互进行介绍，敬请指正。