什么是 document.querySelector
document.querySelector 是 JavaScript 里最常用的 DOM 查询方法之一。它会按照 CSS 选择器去页面里找元素，返回第一个匹配到的节点。找按钮、图片、段落，基本都够用。
基本写法
选择器本身不复杂：#id 选 ID，.class 选类名，tag 直接按标签名找。
调用方式也很直接：
document.querySelector('选择器')
拿到元素之后，就可以改文字、改样式，或者绑事件。
const btn = document.querySelector('#submit')
btn.textContent = '已提交'
btn.style.color = 'red'
几个新手常踩的坑
最常见的是选择器符号写反了。id 前面要带 #，类名前面要带 .，这一步错了，后面看起来像是'没找到元素'，其实只是选择器没写对。
第二个问题是元素还没渲染出来就去查。页面如果有异步加载内容，查询时机太早，返回的就是 null。这种情况一般要等 DOM 加载完成，或者等目标节点真正插入后再查。
还有一个容易忽略的点：querySelector 只返回第一个匹配项。如果你想拿到一组元素，得换成 querySelectorAll。
练习可以怎么做
如果只是讲语法，学得会很快，忘得也快。更实用的办法是直接做几个小练习：
- 找按钮：页面上放几个颜色不同的按钮，要求只选中指定颜色那个。
- 改文字：定位到某个段落，把内容换成新的文案。
- 隐藏图片：找到图片节点，把它设成不可见。
这类练习不花哨，但对理解选择器和 DOM 操作很有效。操作一遍，比背一遍印象深。
做练习时给点反馈会更顺手
如果是做成交互式练习工具，反馈最好直接一点。比如选错元素时，给实际选中的节点加红色边框；报错文案不要太空，直接说明错在颜色、类名还是标签；如果再配一个语法提示按钮，学习成本会低不少。
进度展示别太复杂
顶部放个进度条就够了。每完成一题填充一点，全部做完再给一个简单的完成状态。再记录一下正确率，用户大概就知道自己是'会了'还是'只是刚好蒙对了'。
结尾
document.querySelector 不是难点，难的是把选择器和页面结构对应起来。它配合最基本的 DOM 操作，就能做出不少实用交互。先从按钮、文本、图片这类简单节点开始，手感比看一堆概念来得快。
