queryselector 和 queryselectorall 最稳，因直接调用 css 选择器引擎，精准可控；避免 getelementsbyclassname 等旧方法及纯结构路径，优先用 class、id、属性选择器及 data-testid。
用 querySelector 和 querySelectorAll 定位最稳
这两个是现代浏览器和主流解析器（如 BeautifulSoup 的 select、Playwright 的 locator、Selenium 4+ 的 find_element(By.CSS_SELECTOR, ...)）底层共用的定位逻辑。它直接走 CSS 选择器引擎，不依赖 DOM 树遍历顺序，比 getElementsByClassName 或 getElementsByTagName 更精准、更可控。
常见错误现象：用 getElementsByClassName("btn btn-primary") 查不到元素——因为该方法只接受单个 class 名，空格会被当分隔符；而 querySelector(".btn.btn-primary") 能正确匹配同时含两个 class 的元素。
-
.my-class匹配任意带该 class 的元素，支持多 class 连写（.a.b.c） -
#my-id匹配唯一 id，优先级高，但注意 id 重复时只返回第一个 -
input[name="email"]属性选择器，对表单字段定位极可靠 -
button[data-testid="submit-btn"]现代前端常用测试属性，比 class 更稳定 - 避免用
div > div > span:nth-child(2)这类纯结构路径——父级一加广告位就失效
BeautifulSoup 里别乱用 find_all 的 class 参数
Python 的 class 是关键字，传 class 属性必须写成 class_="..."，否则语法报错。更关键的是：class_="btn primary" 表示“class 属性值**完全等于**这个字符串”，不是“包含这两个 class”。这跟 CSS 选择器行为不一致，容易误判。
正确做法是改用 select()：
soup.select("button.btn.primary") # ✅ 同时含 btn 和 primary 两个 class
soup.select("input[type='text'][name$='phone']") # ✅ type=text 且 name 以 phone 结尾
如果非要用 find_all，得传列表：find_all("button", class_=["btn", "primary"])，但语义是“class 值为 'btn' 或 'primary'”，不是“同时拥有”，所以依然不准。
遇到动态 class（含哈希）怎么办
Vue/React 渲染的页面常出现 class="header _sc-abc123" 这种带随机后缀的 class，硬写全名必挂。这时候不能靠肉眼抄，得用部分匹配逻辑。
- CSS 选择器用
[class*="header"]（包含子串）、[class^="header"]（开头匹配）或[class~="header"]（空格分隔的独立词） - 在 BeautifulSoup 中：
soup.select('[class*="header"]') - 在 Selenium/Playwright 中：
page.locator('button[class*="submit"]') - 慎用
[class*="btn"]—— 如果页面有btn-group、sub-btn也会被误中
真正稳定的方案是推动前端加 data-test-id 或 data-testid，这类属性本就设计为自动化服务，不会参与样式计算，也不会被构建工具混淆。
getBoundingClientRect() 不是用来“找元素”的
这是最容易混淆的点：getBoundingClientRect() 返回的是元素**渲染后的几何位置**，不是定位手段。它解决的是“这个元素现在画在哪”，而不是“怎么拿到这个元素”。想用它来反向定位？不行——你得先有元素引用，才能调这个方法。
典型误用场景：
- 试图用
document.elementsFromPoint(x, y)+getBoundingClientRect()做坐标定位 → 滚动、缩放、iframe 都会让坐标失准 - 在元素还没挂载（比如 React 组件未渲染）时就调用 → 返回空矩形或报错
- 拿
offsetTop/offsetLeft当页面绝对坐标 → 它们只相对于最近已定位祖先，中间套一层position: relative就全乱
真要算页面坐标，先 querySelector 拿到元素，再调 getBoundingClientRect() 加 window.scrollX/Y，仅此而已。定位本身，永远从 HTML 结构和选择器出发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
