如何用一个函数返回querySelector和querySelectorAll的结果？

你之前的尝试逻辑有误，因为传入的target是选择器字符串，所有判断条件都无法正确区分匹配元素的数量。以下是正确的实现方式：

核心思路 #

先通过querySelectorAll获取所有匹配元素的集合（无论数量多少），再根据集合长度决定返回单个元素还是整个集合：

const get = (target) => {
  const elements = document.querySelectorAll(target);
  return elements.length === 1 ? elements[0] : elements;
};

代码解释 #

1. 调用document.querySelectorAll(target)，统一获取所有匹配元素，返回一个NodeList对象
2. 若集合长度为1，返回集合的第一个元素（和querySelector的返回结果一致）
3. 若集合长度大于1或等于0，返回整个NodeList（和getAll的返回结果一致）

可选调整（处理无匹配元素的情况） #

如果希望在没有匹配元素时返回null而非空NodeList，可以修改为：

const get = (target) => {
  const elements = document.querySelectorAll(target);
  if (elements.length === 0) return null;
  return elements.length === 1 ? elements[0] : elements;
};

之前代码的问题分析 #

• 第一个尝试：NodeList.prototype.isPrototypeOf(target)判断的是target是否为NodeList实例，但target是字符串，条件永远不成立，只会返回querySelector结果
• 第二个尝试：target.length > 1判断的是选择器字符串的长度，而非匹配元素的数量，逻辑完全错误
• 第三个尝试：typeof(target) == 'object'中，字符串的typeof是string，条件永远不成立，只会返回querySelector结果

内容的提问来源于stack exchange，提问作者eujin