获取元素

DOM（Document Object Model）把整个 HTML 文档解析成一棵节点树，JS 通过 document 对象操作它。改页面之前，第一步永远是「拿到元素」。

现代写法只记两个方法：document.querySelector('选择器') 返回第一个匹配的元素，document.querySelectorAll('选择器') 返回所有匹配的 NodeList（可以用 forEach 遍历）。它们接受任何 CSS 选择器：'#id'、'.class'、'ul li > a' 都行。老式的 getElementById 依然可用且最快，看到别人的代码要认识。

注意：querySelector 找不到时返回 null，紧接着调用它的方法就会报 Cannot read properties of null——控制台看到这个报错，第一反应应该是「选择器没选中元素」。

本节要点querySelector 拿单个、querySelectorAll 拿全部，参数就是 CSS 选择器；找不到返回 null，报 null 错先查选择器。

HTML

<ul id="list" class="todo">
  <li class="item">学习 HTML</li>
  <li class="item">学习 CSS</li>
  <li class="item special">学习 JS</li>
</ul>
<p id="info">演示区域</p>
<script>
  // 按 id 获取（老式但最快）
  const list = document.getElementById('list');

  // 按 CSS 选择器获取（现代推荐）
  const info = document.querySelector('#info');
  const firstItem = document.querySelector('.item');
  const items = document.querySelectorAll('.item'); // 全部匹配

  console.log(list.tagName);           // UL
  console.log(info.textContent);
  console.log(firstItem.textContent);  // 只拿第一个
  items.forEach((el, i) =>
    console.log('第' + (i + 1) + '项：' + el.textContent)
  );
</script>

🔗 相关词条HTML CSS 选择器 DOM JS 元素节点

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读