DOM 查询：找到页面上的元素

每点一个按钮，控制台会输出这次查询的表达式和真实结果；命中时下方示例卡片会有蓝色描边。

一、querySelector / querySelectorAll：复用 CSS 选择器

document.querySelector('.card')        // 第一个匹配，找不到 → null
document.querySelectorAll('.card')     // 全部匹配 → NodeList（找不到是空集合）
document.getElementById('staff-list')  // 按 id 直取，最快

// 选择器写法和 CSS 完全一致：.tag、#list、li.card、[data-role="frontend"] …

二、顺着关系走：父子、兄弟、closest

const list = document.getElementById('staff-list')
list.children.length          // 3：子元素集合
list.firstElementChild        // 第一张卡
card.parentElement            // 回到 ul
card.nextElementSibling       // 下一张卡
tag.closest('.card')          // 从自己开始往上找最近的 .card 祖先
card.matches('.highlight')    // 我匹配这个选择器吗？

三、NodeList 也是可迭代的：forEach / for...of / Array.from

const cards = document.querySelectorAll('.card')

cards.forEach(card => …)               // NodeList 自带 forEach
for (const card of cards) { … }        // 也可以用 for...of
Array.from(cards).map(card => …)       // 要 map / filter 就先转成真数组

四、live 集合与静态快照：追加一张卡试试

下面两个集合在页面加载时就「存好」了：getElementsByClassName 返回的 HTMLCollection 是 live 的（DOM 变了它跟着变），querySelectorAll 返回的 NodeList 是静态快照（查询那一刻定死）。