沛公分享站

《Mastering Web Data Capture with Browser Console XPath and CSS Selectors》 | Notion

《精通浏览器控制台数据抓取：XPath与CSS选择器》 | Notion

数据抓取语法详解
├── 浏览器控制台命令
│   ├── 基础命令
│   │   ├── document.querySelector() - 选择单个元素
│   │   │   └── 示例: document.querySelector('.header') // 选择class为header的元素
│   │   ├── document.querySelectorAll() - 选择多个元素
│   │   │   └── 示例: document.querySelectorAll('div.product') // 选择所有class为product的div
│   │   ├── console.log() - 输出日志
│   │   │   └── 示例: console.log('提取到的数据:', data)
│   │   └── console.table() - 表格形式展示数据
│   │       └── 示例: console.table([{name: 'iPhone', price: '999'}, {name: 'iPad', price: '799'}])
│   └── 高级命令
│       ├── $x() - 执行XPath表达式
│       │   └── 示例: $x("//div[@class='product']") // 选择class为product的所有div
│       ├── $$() - 执行CSS选择器
│       │   └── 示例: $$('.product-item') // 选择所有class为product-item的元素
│       ├── $() - 执行JavaScript表达式
│       │   └── 示例: $('.header').innerText // 获取header元素的文本内容
│       └── console.time() - 性能计时
│           └── 示例: console.time('数据提取'); /* 执行操作 */ console.timeEnd('数据提取')
├── XPath语法
│   ├── 基本语法
│   │   ├── 节点选择（/）
│   │   │   └── 示例: /html/body/div - 从根节点开始选择
│   │   ├── 任意位置（//）
│   │   │   └── 示例: //div - 选择文档中任意位置的div
│   │   ├── 属性访问（@）
│   │   │   └── 示例: //div[@class='header'] - 选择class为header的div
│   │   └── 文本获取（text()）
│   │       └── 示例: //div/text() - 获取div的文本内容
│   ├── 轴
│   │   ├── child:: - 子节点
│   │   │   └── 示例: //div/child::p - 选择div的所有p子元素
│   │   ├── parent:: - 父节点
│   │   │   └── 示例: //p/parent::div - 选择p元素的div父元素
│   │   ├── ancestor:: - 祖先节点
│   │   │   └── 示例: //p/ancestor::div - 选择p元素的所有div祖先
│   │   ├── descendant:: - 后代节点
│   │   │   └── 示例: //div/descendant::p - 选择div的所有p后代
│   │   ├── following:: - 后续节点
│   │   │   └── 示例: //div/following::p - 选择div后的所有p元素
│   │   └── preceding:: - 前序节点
│   │       └── 示例: //div/preceding::p - 选择div前的所有p元素
│   ├── 函数
│   │   ├── 字符串函数
│   │   │   ├── concat() - 连接字符串
│   │   │   │   └── 示例: concat('价格: ', text())
│   │   │   ├── contains() - 包含判断
│   │   │   │   └── 示例: //div[contains(@class, 'product')]
│   │   │   ├── substring() - 截取字符串
│   │   │   │   └── 示例: substring(text(), 1, 10)
│   │   │   └── translate() - 字符转换
│   │   │       └── 示例: translate(text(), 'abc', 'ABC')
│   │   ├── 数值函数
│   │   │   ├── sum() - 求和
│   │   │   │   └── 示例: sum(//div[@class='price'])
│   │   │   ├── avg() - 平均值
│   │   │   │   └── 示例: avg(//div[@class='score'])
│   │   │   ├── max() - 最大值
│   │   │   │   └── 示例: max(//div[@class='price'])
│   │   │   └── min() - 最小值
│   │   │       └── 示例: min(//div[@class='price'])
│   │   └── 布尔函数
│   │       ├── and() - 与操作
│   │       │   └── 示例: //div[@class='product' and @id='main']
│   │       ├── or() - 或操作
│   │       │   └── 示例: //div[@class='product' or @class='item']
│   │       └── not() - 非操作
│   │           └── 示例: //div[not(@class='hidden')]
│   └── 谓词过滤
│       ├── [位置] - 位置过滤
│       │   └── 示例: //div[1] - 选择第一个div
│       ├── [@属性] - 属性过滤
│       │   └── 示例: //div[@id='header'] - 选择id为header的div
│       └── [条件] - 条件过滤
│           └── 示例: //div[text()='价格'] - 选择文本为"价格"的div
└── CSS选择器
    ├── 基础选择器
    │   ├── 元素选择器（div）
    │   │   └── 示例: div - 选择所有div元素
    │   ├── 类选择器（.class）
    │   │   └── 示例: .product - 选择所有class为product的元素
    │   ├── ID选择器（#id）
    │   │   └── 示例: #header - 选择id为header的元素
    │   └── 属性选择器（[attr]）
    │       └── 示例: [data-id] - 选择有data-id属性的元素
    ├── 组合选择器
    │   ├── 后代选择器（空格）
    │   │   └── 示例: div p - 选择div内的所有p元素
    │   ├── 子元素选择器（>）
    │   │   └── 示例: div > p - 选择div的直接子元素p
    │   ├── 相邻选择器（+）
    │   │   └── 示例: div + p - 选择紧跟在div后的p元素
    │   └── 通用兄弟选择器（~）
    │       └── 示例: div ~ p - 选择div后的所有同级p元素
    └── 伪类与伪元素
        ├── :hover - 鼠标悬停
        │   └── 示例: a:hover - 选择鼠标悬停的链接
        ├── :active - 激活状态
        │   └── 示例: button:active - 选择被激活的按钮
        ├── :focus - 焦点状态
        │   └── 示例: input:focus - 选择获得焦点的输入框
        ├── ::before - 前置内容
        │   └── 示例: div::before - 在div前插入内容
        └── ::after - 后置内容
            └── 示例: div::after - 在div后插入内容

什么是 XPath？

XPath（XML Path Language）是一种用于在 XML 文档中定位节点的语言。它也可以用于 HTML 文档，因为 HTML 是 XML 的一种形式。XPath 使用路径表达式来选择 XML 文档中的节点或节点集。

XPath 的作用

XPath 的主要作用是：

  1. 定位节点：通过路径表达式选择 XML 或 HTML 文档中的特定节点。
  2. 提取数据：从选定的节点中提取数据，如文本内容、属性值等。
  3. 过滤数据：通过条件表达式过滤节点，选择符合特定条件的节点。

如何使用 XPath？

XPath 通常用于以下场景：

  1. 网页抓取：在网络爬虫中，使用 XPath 从网页中提取数据。
  2. 自动化测试：在自动化测试工具中，使用 XPath 定位网页元素。
  3. 数据处理：在数据处理工具中，使用 XPath 从 XML 或 HTML 文档中提取数据。

使用 XPath 的方法

1. 在浏览器中使用 XPath

大多数现代浏览器（如 Chrome、Firefox）都支持在开发者工具中使用 XPath 来定位元素。

  1. 打开开发者工具：