核心是用真实页面table.html练6种查询：id定位、后代关系、结构化导航、name匹配、表单快捷访问、边界处理，每步验证返回值类型与动态性，并缓存变量、加容错判断、对比性能差异。
直接上手做，不绕弯子。核心是“真实页面 + 明确目标 + 多种解法对比”，重点练准、练快、练稳。
选一个带表单和表格的典型页面
用《现代 JavaScript 教程》里那个 table.html 就很合适：它结构清晰，有嵌套、有重复属性（比如两个 name="search"）、有动态内容（radio、input 数组），能覆盖 90% 的查询场景。不用自己造，复制粘贴就能跑。
定 6 个具体可验证的目标元素
按实战任务来，每个目标都对应一种典型查询逻辑：
-
id 定位：找
<table id="age-table"> → 用 <code>getElementById最直白 -
后代关系：找该表格内所有
<label></label>→querySelectorAll或getElementsByTag都行，但前者支持 CSS 语法更灵活 -
结构化导航：找表格第一个
<td> → 直接用 <code>table.rows[0].cells[0]，比选择器更快更稳定 -
name 属性匹配：找
<form name="search"></form>→ 注意getElementsByName('search')[0]拿到的是表单，不是内部 input -
表单快捷访问：找表单内第一个
<input>→form.elements[0]或form.elements['search']都可以 -
边界情况处理：找表单最后一个
<input>→form.elements[form.elements.length - 1]，别用:last-child，它不认表单语义 - 用
console.dir()看它是 Element 还是 HTMLCollection； - 删掉一个
<label></label>，再查getElementsByTag('label')—— 集合自动变短，说明是动态的； - 同样操作下
querySelectorAll('label')—— 长度不变，说明是静态快照； - 试试
table.rows[0].cells[0].textContent和innerText输出差别，理解文本提取逻辑。 - 把常用查询结果缓存到变量里，比如
const ageTable = document.getElementById('age-table');，后续操作都基于它，避免重复遍历； - 加个简单判断：
if (!ageTable) { console.warn('没找到 age-table'); return; }，真实项目里 DOM 可能还没加载完； - 对比下
getElementById和querySelector('#age-table')在控制台执行时间，感受原生优化的差异。
每查一个，立刻验证返回值类型和行为
光拿到元素不够，要确认它是不是你想要的那个“活”的节点：
最后加一层性能和容错意识
查完不等于练完。补两步才算闭环：
