JS 查询选择器单选检查 - Javascript

在 Javascript 中，我们经常需要查询指定元素或元素组合的属性。为了实现这个目的，我们需要使用选择器和查询函数。选择器指定要查询的元素，查询函数将返回匹配的元素和属性。

在本文中，我们将介绍如何使用 Javascript 查询选择器进行单选检查，即检查给定元素组合是否只有一个元素满足给定条件。

选择器

首先，我们需要了解选择器的类型。Javascript 支持以下选择器：

• 元素选择器：使用元素名称选择元素
• ID 选择器：使用元素 ID 选择元素
• 类选择器：使用元素类选择元素
• 属性选择器：使用元素属性选择元素
• 伪类选择器：使用元素状态或位置选择元素

选择器的语法如下：

• 元素选择器：<element-name>
• ID 选择器：#<element-id>
• 类选择器：.<class-name>
• 属性选择器：[<attribute-name>[=<attribute-value>]]
• 伪类选择器：:<pseudo-class>

例如，选择器 #main .article 将选择 ID 为 'main' 的元素下所有 class 为 'article' 的元素。

查询函数

现在，我们需要知道如何使用 Javascript 的查询函数。Javascript 支持以下查询函数：

• document.getElementById(<element-id>)：返回匹配给定 ID 的元素
• document.getElementsByTagName(<tag-name>)：返回匹配给定元素名称的所有元素的列表
• document.getElementsByClassName(<class-name>)：返回匹配给定类名称的所有元素的列表
• document.querySelector(<selector>)：返回匹配给定选择器的第一个元素
• document.querySelectorAll(<selector>)：返回匹配给定选择器的所有元素的列表

例如，查询函数 document.querySelector('#main .article') 将返回 ID 为 'main' 的元素下第一个 class 为 'article' 的元素。

单选检查实现

现在，我们将结合选择器和查询函数实现单选检查。检查函数的逻辑如下：

1. 使用 document.querySelectorAll(<selector>) 查询出所有满足给定选择器的元素。
2. 如果匹配元素数量为 1，则表示满足单选条件，返回 true。
3. 如果匹配元素数量为 0 或大于 1，则表示不满足单选条件，返回 false。

实现代码如下：

/**
 * @param {string} selector - 要查询的选择器
 * @returns {boolean} - 表示是否只有一个元素满足给定条件
 */
function isSingleMatch(selector) {
  const matches = document.querySelectorAll(selector);
  return matches.length === 1;
}

示例

以下是使用单选检查函数的一个示例：

<div id="main">
  <div class="article">Article 1</div>
  <div class="article">Article 2</div>
</div>

const selector = '#main .article';
if (isSingleMatch(selector)) {
  const article = document.querySelector(selector);
  console.log(article.textContent); // 输出 'Article 1'
} else {
  console.error('单选检查未通过');
}

在此示例中，选择器 #main .article 匹配了两个元素，但是由于我们的检查函数返回 false，因此不会执行 console.error 语句，而是执行 console.log 语句输出第一个满足条件的元素的文本内容 'Article 1'。