CSS选择器应用：网页抓取中如何获取id为done的div的data-ret属性

别着急，我来帮你搞定这个问题！针对获取id为done的div元素的data-ret属性值，不同的网页抓取工具都有对应的实现方式，我给你列几个常用的方案：

如果网页是静态加载的（页面加载完成后目标元素就存在于HTML源码中），BeautifulSoup是非常好用的工具。示例代码如下：

from bs4 import BeautifulSoup

# 假设你已经获取到了网页的HTML内容，存在html变量里
html = '''<div class="main"> <div id="son" class="well"></div> <div id="done" data-ret="512,500"></div> </div>'''

soup = BeautifulSoup(html, 'html.parser')
# 通过id定位元素，然后获取data-ret属性
done_element = soup.find(id='done')
if done_element:
    data_ret_value = done_element.get('data-ret')
    print(data_ret_value)  # 输出：512,500

PyQuery的语法和jQuery类似，用起来很顺手，适合熟悉前端选择器的同学：

from pyquery import PyQuery as pq

html = '''<div class="main"> <div id="son" class="well"></div> <div id="done" data-ret="512,500"></div> </div>'''

doc = pq(html)
# 直接用id选择器定位，然后attr方法获取属性
data_ret_value = doc('#done').attr('data-ret')
print(data_ret_value)  # 输出：512,500

如果目标元素是通过JavaScript动态生成的（静态HTML源码里找不到这个元素），那得用Selenium模拟浏览器加载页面：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 初始化浏览器（这里用Chrome，需要提前安装ChromeDriver）
driver = webdriver.Chrome()
driver.get('你的目标网页URL')

# 通过ID定位元素，然后获取data-ret属性
try:
    done_element = driver.find_element(By.ID, 'done')
    data_ret_value = done_element.get_attribute('data-ret')
    print(data_ret_value)  # 输出：512,500
finally:
    driver.quit()

如果你用Node.js做网页抓取，Cheerio是不错的选择，语法同样贴近jQuery：

const cheerio = require('cheerio');

const html = '<div class="main"> <div id="son" class="well"></div> <div id="done" data-ret="512,500"></div> </div>';
const $ = cheerio.load(html);

const dataRetValue = $('#done').attr('data-ret');
console.log(dataRetValue); // 输出：512,500

简单总结下：静态网页用前两种方案足够，动态网页就用Selenium。你可以根据自己的技术栈和网页类型选对应的方法~

内容的提问来源于stack exchange，提问作者bknight