queryselector只返回第一个匹配元素，queryselectorall返回所有匹配元素的nodelist；需用foreach遍历或转为数组操作，不可误当数组使用。
querySelector 本身只能获取单个元素，它只返回匹配的第一个元素。如果要获取多个元素，应该使用 querySelectorAll。
querySelector 和 querySelectorAll 的核心区别
两者语法相同，但行为不同：
-
querySelector('div')→ 返回第一个<div> 元素（或 <code>null） -
querySelectorAll('div')→ 返回所有<div> 元素的 <strong>NodeList</strong>（类数组对象） <h3>如何正确使用 querySelectorAll 获取多个元素</h3> <p>调用后得到的是 NodeList，可直接遍历或转换为数组操作：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java"><img src="https://img.php.cn/upload/skill/000/000/081/178955835420587.jpg" alt="Alibabacloud Sdk Client Initialization For Java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="overflowclass">Alibabacloud Sdk Client Initialization For Java</a> <p class="overflowclass">在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。</p> </div> <a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>用 <code>forEach遍历（现代浏览器支持）：document.querySelectorAll('.item').forEach(el => console.log(el)); - 转成数组再操作（兼容性更强）：
Array.from(document.querySelectorAll('.item')).map(el => el.textContent); - 用扩展运算符：
[...document.querySelectorAll('button')].forEach(btn => btn.disabled = true);
常见误区提醒
不要试图用 querySelector “多次调用”来模拟多选——它不会记住上次位置，每次都是从头找第一个匹配项，结果重复且低效。
也不要把 querySelectorAll 的结果误当成数组：它没有 push、pop 等方法，需先转换。
不复杂但容易忽略：选多个，就用 querySelectorAll；选一个，才用 querySelector。
