queryselector是最直接的单节点定位方法，支持css选择器语法，返回首个匹配项或null；queryselectorall用于批量获取节点并手动筛选；getelementbyid性能最优但仅限id查找；cheerio在node.js中模拟jquery行为但不支持动态内容和多数伪类。
用 querySelector 快速定位单个节点
绝大多数场景下，querySelector 是最直接的选择——它支持完整的 CSS 选择器语法，浏览器原生、Node.js（配合 jsdom）也都能用。注意它只返回第一个匹配项，没找到就返回 null，不会报错。
常见误用是把复杂 XPath 当成选择器传进去，比如写 document.querySelector("//div[@class='item']")，这会直接抛 SyntaxError。XPath 不被支持，必须转成 CSS 语法：document.querySelector("div.item")。
实操建议：
- 优先用类名、ID 或语义化标签组合，比如
document.querySelector("main .content > p:first-child") - 避免过度嵌套（超过 4 层），影响可读性和性能
- 如果目标节点动态插入，确保执行时机在 DOM 就绪后（
DOMContentLoaded或jsdom.env的回调里）
用 querySelectorAll 批量取节点并筛选
当你需要多个节点，或要基于运行时条件进一步判断（比如文本内容、属性值是否含某字符串），querySelectorAll 返回的是 NodeList，得手动遍历。
容易踩的坑是把它当数组直接调 .filter() ——老版本浏览器中 NodeList 没这个方法。安全做法是转成数组：[...document.querySelectorAll("a")].filter(el => el.href.includes("https"))。
使用场景举例：
- 提取所有带
data-testid的按钮：document.querySelectorAll("[data-testid^='btn-']") - 找父容器下第 3 个子
li：container.querySelectorAll("li")[2]（注意索引从 0 开始） - 配合
Array.from()做类型断言：Array.from(els).find(el => el.textContent.trim() === "提交")
用 getElementById 和 getElementsByClassName 的兼容性权衡
这两个 API 虽然古老，但在纯静态 HTML 解析（如服务端 cheerio）中依然高效，且不依赖 CSS 解析引擎。但要注意：getElementsByClassName 返回的是实时 HTMLCollection，不是快照；若边遍历边修改 DOM，可能引发意外跳过或重复。
性能差异明显：在大型文档中，getElementById 是 O(1) 查找，而 querySelector 是 O(n) 遍历加解析。如果 ID 确保唯一且已知，优先用前者。
关键区别：
-
getElementById("header")→ 返回单个元素或null -
getElementsByClassName("card")→ 返回HTMLCollection，需用[0]或item(0)取值 -
getElementsByTagName("input")同样返回实时集合，且不支持选择器语法
在 Cheerio 中查找节点的特殊点
Cheerio 是 Node.js 里最常用的 HTML 解析库，行为接近 jQuery，但不跑在浏览器环境。它的查找函数看起来像 $("div.content")，但底层不支持伪类如 :hover、:nth-of-type(2n)（只支持 :first、:last 等有限几个），也不执行 JS，所以动态渲染的内容查不到。
容易忽略的细节：
- 加载 HTML 时若未指定
charset，中文可能乱码，建议显式传入：cheerio.load(html, { xmlMode: false, decodeEntities: true }) -
.find()是相对查找，$().find("span")在当前选中集内部搜索；而$("span")是全局查找 - 链式调用后想获取原始 DOM 元素？用
.get(0)，不是[0]——后者返回的是 cheerio 对象封装体
真正麻烦的从来不是“怎么写那行查找代码”，而是搞清目标节点在解析树里的实际位置——比如是否被 Shadow DOM 包裹、是否由 JS 异步插入、是否有命名空间前缀（XML 场景）。这些情况下，通用查找会失效，得换策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
