JavaScript 获取 DOM 元素

上一篇认识了 DOM 树，这一篇解决第一步，怎么从树上把想要的元素拿下来。拿不到元素，后面所有操作都是空谈。本篇介绍三个方法，getElementById 按 id 拿，querySelector 和 querySelectorAll 按 CSS 选择器拿，一套选择器走天下。

document.getElementById()

给元素加 id，就能按 id 直接取到它。id 在页面里唯一，所以结果永远是单个元素。

<h1 id="title">你好</h1>

const title = document.getElementById('title');
console.log(title);            // 元素
console.log(title.textContent) // 你好

id 必须保持唯一，同一个 id 出现两次属于写错了，浏览器只会返回第一个。

document.querySelector()

querySelector 接受 CSS 选择器，返回第一个匹配的元素。id 选择器用 # 开头，class 选择器用 . 开头，标签选择器直接写标签名。

<h1 id="title">你好</h1>
<p class="intro">第一段</p>
<p class="intro">第二段</p>
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

const title = document.querySelector('#title');    // 按 id 取
const intro = document.querySelector('.intro');    // 按 class 取，得到第一个匹配
const li = document.querySelector('li');           // 按标签取，得到第一个 li
const firstItem = document.querySelector('ul li'); // 组合选择器，ul 里的第一个 li

写法和你写 CSS 一模一样，会写 CSS 选择器就会用 querySelector，不用再记第二套规则，这就是推荐它的原因。

document.querySelectorAll()

取所有匹配的元素，返回一个 NodeList，它长得像数组，可以用索引访问，也有 length 属性。

<p class="intro">第一段</p>
<p class="intro">第二段</p>

const intros = document.querySelectorAll('.intro');
console.log(intros.length); // 2，匹配到了两个
console.log(intros[0]);     // 第一个 p 元素

NodeList 支持 for…of 遍历，遍历的写法跟数组一样，具体技巧可以回顾 JavaScript 遍历数组。

const intros = document.querySelectorAll('.intro');

for (const p of intros) {
  console.log(p.textContent);
}
// 第一段
// 第二段

找不到元素时返回 null

querySelector 找不到匹配的元素时返回 null，getElementById 也一样。null 没有 textContent 这些属性，不判断就直接用会报错，所以拿到元素后先判断再使用是稳妥的习惯。

const box = document.querySelector('.not-exist');

if (box) {
  console.log(box.textContent); // 元素存在才执行
} else {
  console.log('没找到这个元素');
}

小结

• getElementById 按 id 获取单个元素。
• querySelector 按 CSS 选择器获取第一个匹配的元素。
• querySelectorAll 获取所有匹配的元素，返回 NodeList。
• CSS 选择器怎么写，querySelector 就怎么用，一套选择器走天下。
• 找不到元素时返回 null，使用前先判断。
• NodeList 可以用 for…of 遍历。
• 下一篇讲拿到元素之后怎么修改它的内容和属性。