最轻量方法是用唯一 data-id 直接定位：table.queryselector('tr[data-id="123"]')；若无唯一标识，优先用 array.from(table.queryselectorall('tr')).find(row => row.textcontent.includes('united states'))；避免使用非标准 :contains() 和易受样式影响的 innertext。
用 document.querySelector 直接匹配行内容
如果目标行有明确、唯一的文本（比如“United States”或 ID 为 user-123），最轻量的方法是用 CSS 选择器 + :has()（现代浏览器支持）或 XPath 回退方案。
-
document.querySelector('tr:has(td:nth-of-type(2):contains("United States"))')—— 注意：:contains()不是标准 CSS，仅部分浏览器实验性支持；生产环境慎用 - 更稳妥的是用
Array.from(table.querySelectorAll('tr')).find(row => row.textContent.includes('United States')) - 若行带唯一
data-id，直接table.querySelector('tr[data-id="123"]')，毫秒级定位，无需遍历 - 避免用
innerText做模糊匹配——它会合并换行、空格，还受 CSSdisplay: none影响；优先用textContent
用 XPath 定位第 N 行或含特定子元素的行
XPath 在自动化或复杂条件匹配时更可靠，尤其当目标不在首列或需跨单元格判断时。
-
document.evaluate('//tr[td[1] = "US"]', table, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue—— 匹配第一列值为"US"的行 -
//tr[.//input[@type="checkbox"]]可定位含复选框的行，适合操作型表格 - Selenium 用户注意：XPath 中的
tr[2]是从 1 开始计数，且//tr[2]指文档中第二个tr，不是表格内第二行；应写成.//tr[2]（相对路径）或//*[@id="myTable"]/tbody/tr[2] - IE 不支持
document.evaluate，如需兼容旧环境，改用querySelectorAll配合Array.prototype.find
监听表格焦点后用键盘导航反向定位当前行
当用户已通过 Arrow 键在表格中移动焦点，想实时知道“现在在哪一行”，不能只依赖 document.activeElement，因为焦点可能落在 td 内部的 button 或 input 上。
- 正确做法：
event.target.closest('tr')—— 安全向上找最近的行容器，哪怕焦点在单元格里的按钮上也不会失效 - 错误写法：
document.activeElement.parentNode.parentNode，DOM 结构一变就崩（比如td里加了div包裹） - 若表格启用了
role="grid"，还需检查aria-selected状态，因为视觉焦点和语义选中可能不同步 - 首次聚焦时，
table.querySelector('tr').focus()不生效——tr默认不可聚焦，得给目标td加tabindex="-1"再调用focus()
大数据量表格避免遍历：预建行索引映射表
当表格超过 500 行，每次 querySelectorAll('tr') 都触发重排，定位延迟明显。此时应提前建立查找索引。
- 初始化时遍历一次：
const rowMap = new Map(); table.querySelectorAll('tr[data-id]').forEach(tr => rowMap.set(tr.dataset.id, tr)) - 后续定位直接
rowMap.get('abc123')，O(1) 时间复杂度 - 如果行 ID 来自后端且稳定，可把索引挂到
table.rowIndexMap = rowMap，避免闭包污染 - 注意：动态增删行后必须同步更新
rowMap，否则查到的是已移除的 DOM 节点（仍存在但已脱离文档）
querySelector 返回 null 时，先确认是否该行尚未渲染，而不是反复调试选择器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
