找页面上的标签，就像在小区里找人：知道门牌号（id）直接敲门找到一个人；知道姓（class）一喊出来一群人；知道穿什么衣服（标签名）又能捞出一批。DOM 给了我们6 种找人的办法。最容易晕的一点先记住：有的办法只给你"一个人"，有的办法给你"一堆人"，一堆人得用下标 [0] 挑出来才能用。
门牌号 onlyP 的人
姓张的邻居 1
姓张的邻居 2
一句话先分清：带 Id 的、querySelector 给一个；其余四个给一群（伪数组）。
| 办法 | 按什么找 | 给你什么 |
|---|---|---|
| getElementById('id') | 门牌号 id | 单个标签（找不到是 null） |
| getElementsByTagName('标签') | 标签名，比如 p | 一群（活名单） |
| getElementsByClassName('类名') | class 姓 | 一群（活名单） |
| getElementsByName('name') | 表单的 name | 一群 |
| querySelector('选择器') | CSS 选择器 | 第一个匹配的 |
| querySelectorAll('选择器') | CSS 选择器 | 全部匹配（死照片） |
// 1. 按门牌号找一个人：直接用，不用加下标
document.getElementById('onlyP'); // 按 id 敲门，只给你 1 个
// 2/3/4. 找一群人：给的是"伪数组"，必须用 [下标] 挑出一个
document.getElementsByTagName('p'); // 一嗓子喊出所有 p 标签
document.getElementsByClassName('neighbor'); // 找所有姓 neighbor 的
document.getElementsByName('hobby'); // 找 name=hobby 的表单项
// 5. querySelector 只给"第一个"
document.querySelector('.neighbor'); // 用 CSS 选择器找，只给排最前的 1 个
// 6. querySelectorAll 给"全部"，自带 forEach
document.querySelectorAll('.neighbor'); // 用选择器找全部，是张定格合影
"一群"在 JS 里叫伪数组——它像一排盒子摆在一起，有编号（0、1、2…），但它本身不是一个标签，所以不能直接给它改颜色。必须先 [0] 拿出第一个。
// ✅ 找一个的，能直接改
document.getElementById('onlyP').style.color = 'red'; // 找到 1 个，直接给它改红
// ❌ 找一群的，直接改会报错
let list = document.getElementsByClassName('neighbor'); // 拿到的是一整排盒子
// list.style.color = 'red'; // 错！一整排盒子没有"颜色"可改
// ✅ 必须先 [0] 拿出第一个
list[0].style.color = 'red'; // 用下标 [0] 挑出第 1 个，再改它
// 想全部改，就循环一个个来
for (let i = 0; i < list.length; i++) list[i].style.color = 'blue'; // 挨个改，才不会漏
如果你拿到"一群"还直接写 list.style，就会报错。因为 list 是一整排盒子，不是一个标签，没有颜色可改；先用 [0] 挑出一个，或循环改每一个。
getElementsBy* 给的是"活名单"：后来小区搬来新邻居，名单会自动把新人加进来。而 querySelectorAll 给的是"死照片"：你按下拍照那一刻是谁，名单就永远是谁，之后再怎么搬家它都不变。
如果你对着活名单边循环边往里面加人，就会卡成死循环。因为名单一直在变、人数一直在涨，循环永远跑不完；正确做法是先把它 Array.from 转成普通数组再操作。
① 用在哪：列表渲染、表单回填、批量改样式时批量取元素；用 id 取唯一按钮。
② 常见坑：把 querySelectorAll 当成单个元素直接改样式报错；边遍历活名单边增删导致死循环。
③ 怎么解决：单个才直接用，一群先 [0] 或循环；活名单先 Array.from 转普通数组再遍历。