JavaScript querySelector 详解：语法、高级选择器、最佳实践与示例

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 介绍：什么是 querySelector？

基本概述与 querySelector 的作用

querySelector 是一个方法，返回 第一个 与指定选择器匹配的元素。

让我们看下面的示例。

const element = document.querySelector('.example');
console.log(element);

这段代码获取类名为 example 的第一个元素。

即使同一选择器对应多个元素，也只会返回第一个匹配的元素。

<div class="example">1</div>
<div class="example">2</div>

在此例中，只会选中第一个 <div class="example">1</div>。

为什么 querySelector 在 DOM 操作中很重要

querySelector 在以下情形中特别有用。

1. 使用 CSS 选择器灵活选取元素

• 支持类、ID、属性、伪类等多种选择器。

2. 即使结构复杂也能保持代码简洁

• 高效查找嵌套元素或具有特定属性的元素。

3. 符合一致、现代的 JavaScript 风格

• 比 getElementById 或 getElementsByClassName 更通用，且配合现代 JavaScript 模式使用效果更佳。

下面是一个在表单内部选取特定按钮的示例。

const submitButton = document.querySelector('form button[type="submit"]');
console.log(submitButton);

这段代码只会选取表单内部的提交按钮。

querySelector 与 querySelectorAll 的区别

querySelector 只返回第一个匹配的元素，而 querySelectorAll 返回 所有匹配元素组成的 NodeList。

const elements = document.querySelectorAll('.example');
console.log(elements);

这段代码获取所有类名为 example 的元素。

小结

本节我们阐述了 JavaScript 中 querySelector 方法的基本概念和作用。

关键要点：

1. 可以使用 CSS 选择器灵活选取元素
2. querySelector 只返回第一个匹配项，querySelectorAll 返回全部匹配项
3. 它是实现简洁高效 DOM 操作的重要方法

在下一节中，我们将更深入地了解 querySelector 的基本语法及实际使用示例。

2. querySelector 的基本语法与用法

基本语法

querySelector 的基本语法如下：

document.querySelector(selector);

• 参数：CSS 选择器字符串。
• 返回值：匹配该选择器的第一个元素。如果未找到匹配项，则返回 null 。

示例：选取基础元素

1. 按 ID 选取 由于 ID 唯一，能够可靠地选取唯一的元素。

   const element = document.querySelector('#header');
   console.log(element);
   

这段代码选取 ID 为 header 的元素。

2. 按类名选取 当指定类名时，只返回第一个匹配的元素。

   const element = document.querySelector('.content');
   console.log(element);
   

这段代码选取类名为 content 的第一个元素。

3. 按标签名选取 也可以通过指定标签名来选取元素。

   const element = document.querySelector('p');
   console.log(element);
   

这段代码选取页面上的第一个 <p> 标签。

使用组合选择器选取元素

通过组合 CSS 选择器，可以更灵活地定位元素。

1. 嵌套选择器 通过指定父子关系来选取元素。

   const element = document.querySelector('div.container p');
   console.log(element);
   

这段代码选取类名为 container 的 <div> 内的第一个 <p> 标签。

2. 属性选择器 选取具有特定属性的元素。

   const element = document.querySelector('input[type="text"]');
   console.log(element);
   

此代码选择第一个 type 属性为 text 的 <input> 元素。

3. 使用伪类 使用伪类来选择特定状态或位置的元素。

   const element = document.querySelector('li:first-child');
   console.log(element);
   

此代码选择第一个 <li> 元素。

当 querySelector 找不到元素时该怎么办

querySelector 在未找到匹配的元素时返回 null。因此，在选择元素后检查该元素是否存在非常重要。

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
} else {
  console.log('Element not found');
}

即使元素不存在，此代码也能安全运行而不会抛出错误。

小结

在本节中，我们介绍了 querySelector 的基本语法和用法。

快速回顾：

1. 可以轻松地通过 ID、类或标签名选择元素
2. 可以通过组合复杂选择器和伪类灵活地选择元素
3. 对缺失元素的错误处理也很重要

在下一节中，我们将深入探讨使用更强大选择器的高级用例。

3. 高级示例：如何使用更强大的选择器

使用属性选择器选择特定元素

属性选择器让你能够灵活地选择具有特定属性或属性值的元素。

1. 选择具有特定属性值的元素

   const checkbox = document.querySelector('input[type="checkbox"]');
   console.log(checkbox);
   

此代码选择第一个 type 属性为 checkbox 的 <input> 元素。

2. 使用属性值的部分匹配

   const link = document.querySelector('a[href^="https://"]');
   console.log(link);
   

此代码选择 href 属性以 https:// 开头的链接。

常用属性选择器：

使用伪类和伪元素进行选择

伪类和伪元素使得在特定状态或位置选择元素变得容易。

1. 用于状态的伪类

   const activeLink = document.querySelector('a.active');
   console.log(activeLink);
   

此代码选择具有 active 类的链接。

2. 用于位置的伪类

   const firstItem = document.querySelector('ul > li:first-child');
   console.log(firstItem);
   

此代码选择列表中的第一个项目。

常用伪类：

使用复合选择器进行细粒度过滤

你也可以组合多个选择器来表达更复杂的条件。

1. 按父子关系过滤

   const nestedElement = document.querySelector('div.container > p.text');
   console.log(nestedElement);
   

此代码选择位于类为 container 的 <div> 元素内部、类为 text 的第一个 <p> 元素。

2. 组合多个条件

   const inputField = document.querySelector('input[type="text"].required');
   console.log(inputField);
   

此代码选择第一个 type="text" 且具有 required 类的 <input> 元素。

小结

在本节中，我们解释了使用 querySelector 的高级选择器用法。

关键要点：

1. 属性选择器实现了对元素的灵活过滤
2. 伪类和伪元素让你能够针对状态和位置进行定位
3. 复合选择器使得指定详细条件并选择复杂目标变得容易

在下一节中，我们将介绍使用 querySelector 时的重要注意事项和最佳实践。

4. 使用 querySelector 时的注意事项和最佳实践

错误处理和空值检查

如果没有元素匹配指定的选择器，querySelector 会返回 null。因此，在尝试操作元素之前，你应始终确认该元素是否存在。

示例：实现空值检查

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
  element.textContent = 'New text';
} else {
  console.log('Element not found');
}

即使元素不存在，此代码也能安全地避免错误。

转义特殊字符

如果你的选择器包含特殊字符，querySelector 可能会抛出错误，除非你正确地对它们进行转义。

示例：选择包含特殊字符的元素

HTML：

<div id="my.id">Special ID</div>

JavaScript：

const element = document.querySelector('#my\.id');
console.log(element);

在处理特殊字符（例如 ., #, [, ] 等）时，使用反斜杠 (\) 进行转义。

性能考虑

1. 避免深层嵌套的选择器 随着选择器变得更复杂，浏览器可能需要更长时间来查找目标元素。尽可能使用更简单的选择器。

不推荐

const element = document.querySelector('div.container > ul > li.item > span.text');

推荐

const container = document.querySelector('.container');
const textElement = container.querySelector('.text');

2. 高效地选择多个元素 使用 querySelectorAll 检索所有目标元素，然后根据需要进行过滤。

   const items = document.querySelectorAll('.item');
   items.forEach((item) => {
     console.log(item.textContent);
   });
   

最佳实践

1. 使用具体的选择器 使用具体的选择器以确保只选择预期的元素。

   const button = document.querySelector('button.submit');
   

2. 使用一致的命名约定 采用一致的规则设计 CSS 类名和 ID，以提升选择器的可读性。

3. 关注可复用代码 如果经常选择某些元素，将逻辑封装成可复用函数会更方便。

   function getElement(selector) {
     const element = document.querySelector(selector);
     if (!element) {
       console.warn(`Element not found: ${selector}`);
     }
     return element;
   }
   
   const header = getElement('#header');
   

小结

在本节中，我们介绍了使用 querySelector 的关键注意事项和高效方法。

要点：

1. 通过始终进行空值检查来防止错误
2. 正确转义包含特殊字符的选择器
3. 在设计选择器时保持简洁，以提升性能
4. 使用函数和命名约定来提升可复用性和可读性

在下一节中，我们将介绍在实际项目中有用的实用示例。

5. 常见问题 (FAQ) 与解决方案

querySelector 与 getElementById 有何区别？

问题：
querySelector 和 getElementById 都可以用来选择元素。它们之间有什么区别？

回答：

使用比较：

// With querySelector
const element1 = document.querySelector('#example');

// With getElementById
const element2 = document.getElementById('example');

应该使用哪一个？

• 对于简单的基于 ID 的选择，getElementById 速度快且推荐使用。
• 当需要灵活的基于选择器的定位 时，使用 querySelector 。

为什么 querySelector 有时不起作用？

问题：
即使我的代码看起来是正确的，querySelector 仍然不起作用。可能的原因是什么？

回答：

1. 元素尚未在 DOM 中存在

• 脚本运行时 DOM 可能尚未完全加载。解决方案：使用 DOMContentLoaded 事件。

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.example');
    console.log(element);
  });
  

2. 选择器不正确

• 类名或 ID 可能写错了。

检查要点：

• 在浏览器的开发者工具中验证选择器。

  const element = document.querySelector('.my-class');
  console.log(element); // Check the result in DevTools
  

3. The element is added dynamically

• If the element is added dynamically via JavaScript, it may not exist at the time you first try to select it.

Solution:
Attach an event listener to a parent element to handle dynamically added elements.

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-element')) {
    console.log('Clicked');
  }
});

How to Access Dynamically Added Elements

Question:
Can dynamically added elements be selected with querySelector?

Answer:
Yes, they can. However, you need to pay attention to the timing of when the element is added.

Solution 1: Observe dynamic elements

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const newElement = document.querySelector('.dynamic-element');
      if (newElement) {
        console.log('A new element was added:', newElement);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

Solution 2: Use setTimeout or setInterval

If the element is added after a certain delay, you can monitor it like this:

setTimeout(() => {
  const dynamicElement = document.querySelector('.dynamic-element');
  console.log(dynamicElement);
}, 1000); // Check for the element after 1 second

Summary

In this section, we covered common questions and troubleshooting tips for using querySelector.

Quick recap:

1. Understand when to use querySelector vs. getElementById .
2. If it doesn’t work, check DOM loading timing and selector mistakes .
3. For dynamic elements, use event delegation or MutationObserver .

In the next section, we’ll summarize key points for effectively using querySelector.

6. Practical Examples: How to Use querySelector in Real Projects

Get Form Input Values and Validate Them

Scenario: When a user enters values into a form, you retrieve them and perform validation.

HTML

<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email address">
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.querySelector('#userForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const username = document.querySelector('#username').value;
  const email = document.querySelector('#email').value;

  if (!username) {
    alert('Please enter a username');
    return;
  }

  if (!email.includes('@')) {
    alert('Please enter a valid email address');
    return;
  }

  alert('The form was submitted successfully');
});

Key points:

• Use the value property to get input values.
• Perform simple validation checks on user input.
• Use event listeners to customize form submission behavior.

How to Add Event Listeners to Dynamically Added Elements

Scenario: Apply event listeners to elements that are dynamically added via JavaScript.

HTML

<div id="container">
  <button id="addButton">Add a button</button>
</div>

JavaScript

const container = document.querySelector('#container');
const addButton = document.querySelector('#addButton');

// Add a new button
addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.classList.add('dynamic-button');
  newButton.textContent = 'Click me!';
  container.appendChild(newButton);
});

// Capture events on the parent element
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('dynamic-button')) {
    alert('The new button was clicked!');
  }
});

Key points:

.

• 由于动态添加的元素无法直接引用，请将事件监听器附加到父元素上。
• 使用 event.target 来识别被点击的元素。

打开和关闭模态窗口

场景：实现模态窗口的打开/关闭行为。

HTML

<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>This is the modal content.</p>
  </div>
</div>
<button id="openModal">Open modal</button>

CSS

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

JavaScript

const modal = document.querySelector('#modal');
const openModal = document.querySelector('#openModal');
const closeModal = document.querySelector('#closeModal');

// Open the modal
openModal.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// Close the modal
closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// Close when clicking outside the modal
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

关键点：

• 使用 classList 添加/移除类并切换可见性。
• 通过允许在点击内容区域之外时关闭模态窗口来提升用户体验。

小结

在本节中，我们介绍了在实际开发场景中使用 querySelector 的实用示例。

你学到了：

1. 通过检索和验证用户输入来实现安全的表单处理。
2. 使用事件委托灵活地处理动态添加的元素。
3. 通过实现模态窗口的打开/关闭行为来改进 UI。

将这些示例作为参考并应用到自己的开发项目中。下一节中，我们将通过总结使用 querySelector 的关键要点来结束本文。

7. 小结：有效使用 querySelector 的关键要点

本文详细介绍了 JavaScript 的 querySelector 方法，从基础到高级用例。最后，让我们回顾最重要的要点并总结如何有效使用它。

querySelector 的核心作用

• 灵活的元素选择：您可以使用 CSS 选择器高效地选择 DOM 元素。
• 简洁的语法：您可以直观地使用类名、ID、标签名和属性选择器来选择元素。
• 支持动态元素：通过将事件监听器附加到父元素，您可以处理后续添加的元素。

基本语法示例：

const element = document.querySelector('.example');

高级用法及重要注意事项

1. 使用高级选择器

• 属性选择器和伪类使您能够更精确、灵活地定位元素。
• 示例：

  const element = document.querySelector('input[type="checkbox"]:checked');
  

2. 编写注重性能的代码

• 尽可能使用简单选择器以降低处理开销。
• 将常用的选择逻辑封装为可复用函数。

2. 彻底的错误处理

• 进行 null 检查并处理元素不存在的情况。
• 示例：

  const element = document.querySelector('.nonexistent');
  if (element) {
    console.log('Element found');
  } else {
    console.log('Element not found');
  }
  

回顾实用示例

• 表单验证：验证输入值以实现安全的表单处理。
• 动态元素处理：灵活地处理通过 JavaScript 生成的元素。
• 模态窗口控制：添加交互行为以提升 UI/UX。

通过这些示例，您了解了 querySelector 的实用性和可扩展性。

充分利用 querySelector 的提示

1. 利用您的开发工具

• 使用浏览器的开发者工具来验证和测试选择器。

1. 优先考虑可读性

• 设计选择器名称和代码结构以易于理解，提高可维护性。

1. 在需要时与 querySelectorAll 一起使用

• 当处理多个元素时，使用 querySelectorAll 来实现高效处理。

总结

querySelector 是一种强大的方法，使 DOM 操作变得简单而高效。

本文的主要要点：

• 您可以以结构化的方式理解从基本用法到高级示例的一切。
• 通过结合选择器和伪类，您可以更灵活地针对元素。
• 通过正确处理错误并考虑性能，您可以编写更实用和可靠的代码。

在 JavaScript 中进行 DOM 操作时，请确保应用本文介绍的技术。

作为您的下一步，深化对 DOM 操作的知识，并通过学习如何将 querySelector 与其他方法结合来提升您的技能！