用浏览器开发者工具可快速定位HTML元素：按Ctrl+Shift+C进入选择模式，动态元素需先交互再检查，Shadow DOM需手动展开；控制台用querySelector可验证选择器；本地文件用grep/rg搜索；批量处理用BeautifulSoup解析更可靠。
用浏览器开发者工具快速定位 HTML 元素
绝大多数时候，你不需要写代码就能查到目标元素——直接用浏览器自带的开发者工具最高效。右键页面任意位置点「检查」，或按 注意：有些元素是动态渲染的（比如 React/Vue 组件），刚打开 DevTools 时可能还没生成，需要先触发交互（如点击按钮、滚动到底部）再检查；另外 Shadow DOM 内部的元素默认不显示在 Elements 面板顶层，得手动点开 当你要验证某个 CSS 选择器是否能命中目标，或批量提取内容时，在 Console 面板直接运行 JS 最灵活。 如果你在改静态页、调试模板或审计前端代码，直接搜文件比打开浏览器更快。 立即学习“前端免费学习笔记（深入）”； 注意： hello 当需要做条件筛选、提取多层嵌套内容、或批量处理多个 HTML 文件时，正则不可靠，必须用 HTML 解析器。 别用 F12 / Ctrl+Shift+I（macOS 是 Cmd+Option+I）打开 DevTools，再按 Ctrl+Shift+C（macOS：Cmd+Shift+C）进入元素选择模式，鼠标悬停或点击页面即可高亮对应 等标签。
#shadow-root 展开。用 JavaScript 的
querySelector 在控制台查找元素
document.querySelector('.btn-primary') 返回第一个匹配的元素（没找到返回 null）document.querySelectorAll('input[type="email"]') 返回 NodeList（不是数组，但可用 [...] 展开或 forEach 遍历）document.querySelector('iframe').contentDocument.querySelector('h1')（注意跨域会报错）getElementById 查动态 ID（如 id="item-123"），优先用 class 或 data 属性：document.querySelector('[data-testid="submit-btn"]')
用命令行工具（
grep / ripgrep）搜索本地 HTML 文件内容
grep -n "Login" index.html
（-n 显示行号）grep -ni "header" *.html
rg）：rg -i "data-api-endpoint" src/
rg '
（--html 能跳过注释和 script 块）grep 对嵌套标签或换行敏感，比如 rg 加 -U（--multiline）或改用专门解析 HTML 的工具（如 hxselect）。用 Python 的
BeautifulSoup 解析并查找 HTML 结构
pip install beautifulsoup4
from bs4 import BeautifulSoup
with open("page.html") as f:
soup = BeautifulSoup(f, "html.parser")
title = soup.find("title").get_text()
links = [a["href"] for a in soup.find_all("a", href=True)]soup.select("nav ul li a.active")"html.parser" 内置但容错弱；"lxml" 快且健壮（需额外装 lxml）；"html5lib" 最接近浏览器行为但慢。re.findall(r'
