https://github.com/cheeriojs/cheerio/wiki/Chinese-README

写在前面

这章介绍用 JavaScript 进行一个网页的爬取
首先，介绍人人都可以欺负的网站：豆瓣电影网https://movie.douban.com/
豆瓣没有设置跨域拦截，也没有安全检测，一爬一个准，是最好的练习材料。

工具介绍

JavaScript中也有类似python中那样发起网页请求的包，如request包和axios包，是不是惊讶JavaScript也有request包，其实JavaScript甚至连requests都有，不过本章主要使用axios来请求页面。

本章爬取用到的工具： 网络请求框架 axios ， html页面代码处理工具 cheerio

axios

JavaScript中最著名的ajax请求框架，可以非常便捷的发起网页请求，并将请求值以response对象的形式返回。axios是一个基于Promise的HTTP 库，可以用在浏览器和node.js中。

cheerio

cheerio是一个实现了大部分jQuery核心功能的框架，并且更加简化了查询元素的操作，删除了jQuery中矛盾的部分，可以说是更加好用的基于jQuery的DOM处理工具，比起jQuery更加精简和快速，建议没学jQuery的直接学习cheerio。
cheerio中文文档：https://www.baidu.com/link?url=STQgTwwLR5appRQ28Ou0yEUHsl1KOuCHAwWwus40bJrGKM-QI0h3WWNgMBvucOU6&wd=&eqid=e56f057c000107d9000000066179568a

步骤

首先要搭载node环境，使用npm下载两个包 axios和cheerio

  1. npm install axios cheerio --save

实例

  1. //1.引入两个包，需要node环境
  2. const cheerio = require("cheerio")
  3. const axios = require("axios")
  4. //通过axios封装的ajax请求获取豆瓣页面代码，由于axios封装Promise所以需要用then调用结果
  5. axios.get('https://movie.douban.com/cinema/nowplaying').then((response) => {
  6.   // console.log(response.data)
  7.   let $ = cheerio.load(response.data)  // $是一个函数类型，用于处理cheerio接管的内容
  8.     //通过$选择器，选择需要获得的页面内容。
  9.   $("#nowplaying ul .list-item").each((index, elem) => {
  10.     console.log('title：' + $(elem).data('title'))
  11.   })
  12. })

主要使用的方法：

  1. axios.get()：发起一个请求，通过.then获取返回值，用res/response接收
  2. cheerio.load() ：load返回一个函数，这个函数可以继续传入要查找的元素，一般用$表示这个函数。
  3. $().find().text() ：text返回查找到的元素中的所有的文本合并后的内容，find用于继续在后续的元素中查找。
  4. $().find().html()：用于渲染查找到的元素内的所有子元素(不包括指定到的元素本身)，将其以html格式的字符输出。
  5. $().data()：data用于查找标签上设置了data-xxx-xxx的内容，传入一个数据的名字就能返回数据的值。例如： ```javascript $(‘
    ‘).data() //=> { appleColor: ‘red’ }

$(‘

‘).data(‘apple-color’) //=> ‘red’

var apple = $(‘.apple’).data(‘kind’, ‘mac’) apple.data(‘kind’) //=> ‘mac’

  1.   5. $().each()：用于有多个匹配值的情况，遍历所有匹配的元素，并为每一个元素调用一个函数，配合data使用，用于遍历所有元素并获得他们的data值。<br />  6.$().attr() ：获取和设置属性的方法。在匹配集合中只能获取的第一个元素的属性值。如果你把属性值设置为空，就会删除该属性。你也可以像jQuery函数一样通过传递键值 和 函数来设置。例如：
  2. ```javascript
  3. $('ul').attr('id')  //获得ul元素中id的值，如果是class则获得类的值以此类推，也可以是href等等
  4. //=> fruits
  6. $('.apple').attr('id', 'favorite').html()
  7. //=> <li class="apple" id="favorite">Apple</li>

爬取结果

image.png成功爬取到title数据