2. 6 种元素获取方式

获取元素就是用 CSS 选择器在页面上"找人"，找到才能操作。

核心六种：
① getElementById——按 ID 找一个
② getElementsByTagName——按标签找一批
③ getElementsByClassName——按 class 找一批
④ querySelector——CSS 选择器找第一个
⑤ querySelectorAll——CSS 选择器找全部
⑥ getElementsByName——按 name 属性找

坑：getElementsBy* 返回实时集合（HTMLCollection）、querySelectorAll 返回静态集合、找不到得 null。

2.1 互动演示（在这个"小区"里找人）

点按钮： 小区里被选中的人会亮起来， 下面同步显示代码与结论。

2.2 知识点逐条讲解

① 6 种办法速查表

一句话先分清：带 Id 的、querySelector 给一个；其余四个给一群（伪数组）。

// 1. 按门牌号找一个人：直接用，不用加下标
// 按 id 敲门，只给你 1 个
document.getElementById('onlyP');

// 2/3/4. 找一群人：给的是"伪数组"，必须用 [下标] 挑出一个
// 一嗓子喊出所有 p 标签
document.getElementsByTagName('p');

// 找所有姓 neighbor 的
document.getElementsByClassName('neighbor');

// 找 name=hobby 的表单项
document.getElementsByName('hobby');

// 5. querySelector 只给"第一个"
// 用 CSS 选择器找，只给排最前的 1 个
document.querySelector('.neighbor');

// 6. querySelectorAll 给"全部"，自带 forEach
// 用选择器找全部，是张定格合影
document.querySelectorAll('.neighbor');

② 为什么给"一群"就不能直接改？

"一群"在 JS 里叫伪数组——它像一排盒子摆在一起，有编号（0、1、2…），但它本身不是一个标签，所以不能直接给它改颜色。必须先 [0] 拿出第一个。

// 找一个的，能直接改
// 找到 1 个，直接给它改红
document.getElementById('onlyP').style.color = 'red';

// 找一群的，直接改会报错
// 拿到的是一整排盒子
let list = document.getElementsByClassName('neighbor');

// list.style.color = 'red';
// 错！一整排盒子没有"颜色"可改
// 必须先 [0] 拿出第一个
// 用下标 [0] 挑出第 1 个，再改它
list[0].style.color = 'red';

// 想全部改，就循环一个个来
// 挨个改，才不会漏
for (let i = 0; i < list.length; i++) list[i].style.color = 'blue';

如果你拿到"一群"还直接写 list.style，就会报错。因为 list 是一整排盒子，不是一个标签，没有颜色可改；先用 [0] 挑出一个，或循环改每一个。

③ 活名单 vs 死照片

getElementsBy* 给的是"活名单"：后来小区搬来新邻居，名单会自动把新人加进来。而 querySelectorAll 给的是"死照片"：你按下拍照那一刻是谁，名单就永远是谁，之后再怎么搬家它都不变。

如果你对着活名单边循环边往里面加人，就会卡成死循环。因为名单一直在变、人数一直在涨，循环永远跑不完；正确做法是先把它 Array.from 转成普通数组再操作。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：列表渲染、表单回填、批量改样式时批量取元素；用 id 取唯一按钮。

② 常见坑：把 querySelectorAll 当成单个元素直接改样式报错；边遍历活名单边增删导致死循环。

③ 怎么解决：单个才直接用，一群先 [0] 或循环；活名单先 Array.from 转普通数组再遍历。

本页重点