上一篇
html取数据
通过JavaScript DOM操作（document.querySelector/getElementById）或jQuery/Cheerio等库解析HTML节点，可提取文本、属性及嵌套数据，对于动态渲染内容需结合AJAX抓取或Puppeteer模拟浏览器
常见HTML数据提取方法
前端JavaScript提取数据
| 方法 | 说明 | 示例代码 |
|---|---|---|
getElementById | 通过元素ID获取数据 | document.getElementById("id").innerText |
getElementsByClassName | 通过CSS类名获取数据集合 | document.getElementsByClassName("class")[0].value |
querySelector | 通过CSS选择器获取单个元素 | document.querySelector(".class").textContent |
FormData | 提取表单数据 | new FormData(document.querySelector("form")).get("field") |
后端抓取HTML数据
| 工具 | 适用场景 | 核心代码 |
|---|---|---|
| Python+BeautifulSoup | 静态页面解析 | python<|vq_13752|>import requests<br>from bs4 import BeautifulSoup<br>soup = BeautifulSoup(requests.get(url).text, 'html.parser')<br>soup.find('div', class_='target') |
| 正则表达式 | 简单文本匹配 | python<|vq_13752|>re.findall(r'<div class="price">(.?)</div>', html) |
| AJAX请求 | 获取动态数据接口 | javascript<|vq_13752|>fetch('/api/data').then(res => res.json()) |
工具对比表
| 维度 | JavaScript | Python(BeautifulSoup) | 正则表达式 |
|---|---|---|---|
| 适用场景 | 前端实时交互 | 后端批量处理 | 简单文本提取 |
| 优势 | 即时响应 | 强大解析能力 | 轻量级 |
| 劣势 | 依赖浏览器环境 | 需网络请求 | 复杂结构处理困难 |
相关问题与解答
Q1：如何处理动态加载的HTML内容？
A1：对于JavaScript动态生成的内容，可使用以下方案：
- 前端：在内容加载完成后通过事件监听获取（如
DOMContentLoaded） - 后端：使用无头浏览器工具（如Puppeteer/Selenium）模拟完整渲染过程
- 查找XHR请求：通过浏览器开发者工具拦截网络请求，直接获取JSON数据源
Q2：如何提取嵌套层级较深的数据？
A2：推荐使用CSS选择器或XPath精确定位：
- CSS选择器：
document.querySelector("#parent > .child > span") - XPath（BeautifulSoup）：
soup.xpath("//div[@id='parent']/ul/li[3]/text()") - 多级组合：`soup.find(“div”, class_=”container”).find_all(“p”)[0
