如何查找HTML元素或文件内容

注意：有些元素是动态渲染的（比如 React/Vue 组件），刚打开 DevTools 时可能还没生成，需要先触发交互（如点击按钮、滚动到底部）再检查；另外 Shadow DOM 内部的元素默认不显示在 Elements 面板顶层，得手动点开 #shadow-root 展开。

用 JavaScript 的 querySelector 在控制台查找元素

当你要验证某个 CSS 选择器是否能命中目标，或批量提取内容时，在 Console 面板直接运行 JS 最灵活。

• document.querySelector('.btn-primary') 返回第一个匹配的元素（没找到返回 null）
• document.querySelectorAll('input[type="email"]') 返回 NodeList（不是数组，但可用 [...] 展开或 forEach 遍历）
• 若页面有 iframe，需先切换上下文：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 index.html

  （--html 能跳过注释和 script 块）

注意：grep 对嵌套标签或换行敏感，比如

用 Python 的 BeautifulSoup 解析并查找 HTML 结构

当需要做条件筛选、提取多层嵌套内容、或批量处理多个 HTML 文件时，正则不可靠，必须用 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)]

• 用 CSS 选择器更接近前端习惯：

  soup.select("nav ul li a.active")

• 注意 parser 选型："html.parser" 内置但容错弱；"lxml" 快且健壮（需额外装 lxml）；"html5lib" 最接近浏览器行为但慢。

别用 re.findall(r'(.*?)