queryselector 和 getelementbyid 是最常用、最值得优先掌握的两个方法；前者返回静态 nodelist、支持完整 css 选择器且更可靠，后者性能最高、返回确定的单个元素或 null。
直接说结论：querySelector 和 getElementById 是最常用、最值得优先掌握的两个方法，其余方法要么返回类型不统一，要么兼容性或行为容易踩坑。
为什么 querySelector 比 getElementsByClassName 更可靠
很多人习惯用 getElementsByClassName('btn')，但它的返回值是 HTMLCollection —— 一种「动态集合」，DOM 变动时它会自动更新，导致你缓存的长度或索引可能突然失效。比如：
const btns = document.getElementsByClassName('btn');
console.log(btns.length); // 3
btns[0].remove(); // 删除第一个按钮
console.log(btns.length); // 立刻变成 2，但你之前存的 btns[1] 已经变成原 btns[0] 了
querySelectorAll('.btn') 返回的是静态 NodeList，不会随 DOM 变化而重排，更符合直觉。而且它支持完整 CSS 选择器，比如 document.querySelectorAll('button[data-action="save"]')，getElementsByClassName 根本做不到。
- 要遍历结果？直接用扩展运算符转数组：
[...document.querySelectorAll('.item')].forEach(...) - 只取第一个？用
querySelector，比getElementsByClassName('x')[0]少写括号、少判空 - IE8 及以下不支持
querySelector？现在基本不用考虑，除非维护 15 年前的老系统
getElementById 是唯一能跳过选择器解析的原生方法
它是所有获取方法中性能最高的，因为浏览器内部有 ID 索引表，不走 CSS 引擎解析。只要确保 ID 唯一（HTML 规范强制要求），它就一定返回单个元素或 null，没有歧义。
常见误用：
- 传入变量但没加引号：
document.getElementById(myId)→ 应该是document.getElementById('myId') - ID 含特殊字符（如点、冒号）未转义：
id="user.name"必须写成document.getElementById('user.name')，不能当 CSS 选择器用 - 在元素加载前执行：
document.getElementById('app')放在里会返回null，要么放前，要么监听DOMContentLoaded
getElementsByTagName 和 getElementsByName 的实际限制
getElementsByTagName 看似简单，但它返回的也是动态 HTMLCollection，且不支持嵌套过滤。比如想取 <main></main> 下所有 <p></p>，不能写 main.getElementsByTagName('p') —— 这样写没错，但如果你后续往 <main></main> 插入新 <p></p>，这个集合会变，而你可能没意识到。
getElementsByName 更隐蔽：它只对部分标签生效（<input>、<button></button>、<form></form>、<iframe></iframe>、<img>、<map></map>、<meta>、<object></object>、<param>、<select></select>、<textarea></textarea>），其他标签即使写了 name 属性也查不到。IE 中还只认表单控件。
- 想批量操作同标签元素？优先用
document.querySelectorAll('div')，语义清晰、返回可控 - 表单提交后取字段值？
form.elements['username']比document.getElementsByName('username')更直接 - 不要依赖
getElementsByName做通用选择器，它不是设计来干这个的
容易被忽略的细节：返回值类型决定你怎么用
所有方法的返回值类型不一致，这是新手最常卡住的地方：
-
getElementById→ 单个Element或null -
querySelector→ 单个Element或null -
querySelectorAll→ 静态NodeList（可直接用forEach，但不能用push） -
getElementsByClassName/getElementsByTagName→ 动态HTMLCollection（没有forEach，得转数组或用for循环） -
getElementsByName→NodeList（但 IE 中是HTMLCollection，行为不一致）
这意味着：哪怕你只是想给 3 个按钮加点击事件，用错方法就会遇到 btns.forEach is not a function 或循环次数突变的问题。最省心的做法是统一用 querySelectorAll + 扩展运算符，或者明确判断类型再处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
