简单的 JavaScript 选择器答案

【问题标题】：Simple JavaScript Selector简单的 JavaScript 选择器
【发布时间】：2013-04-04 06:23:08
【问题描述】：

使用纯 JavaScript 没有任何像 jQuery 这样的库，我如何检测变量是否包含 DOM 类或 ID？

例如，如果我将一个值传递给函数，则可能是...

var mySelector = ".class-name";

或

var mySelector = "#id-name";

然后根据 mySelector 是否持有我将运行的 Class 或 ID

document.getElementsByClassName

或

document.getElementsById

如果不使用像 jQuery 这样的库或其他库，最好的方法是什么？

【问题讨论】：

标签： javascript

【解决方案1】：

我不是高级用户，但前段时间我创建了这个小脚本：

https://gist.github.com/caiotarifa/cc7d486292f39157d763

var __;

__ = function(selector, filter) {
  'use strict';

  var response;

  function filtering(selectors, filter) {
    switch (filter) {
      case "first":
        return selectors[0];
        break;
      case "last":
        return selectors[selectors.length - 1];
        break;
      default:
        return selectors[filter];
        break;
    }
  }

  selector = selector.trim();
  if (typeof filter === "string") { filter = filter.trim(); }

  if (selector.indexOf(' ') < 0 && selector.indexOf('.', 1) < 0 && selector.indexOf('#', 1) < 0) {
    switch (selector.substr(0, 1)) {
      case '.':
        response = document.getElementsByClassName(selector.substr(1));
        if (response.length === 1) { filter = "first"; }
        if (typeof filter !== "undefined") { response = filtering(response, filter) }
        break;
      case '#':
        response = document.getElementById(selector.substr(1));
        break;
      default:
        response = document.getElementsByTagName(selector);
        if (response.length === 1) { filter = "first"; }
        if (typeof filter !== "undefined") { response = filtering(response, filter) }
        break;
    }
  } else {
    if (typeof filter !== "undefined") {
      switch (filter) {
        case "first":
          response = document.querySelector(selector);
          break;
        case "last":
          response = document.querySelectorAll(selector);
          response = response[response.length - 1];
          break;
        default:
          response = document.querySelectorAll(selector);
          response = response[filter];
          break;
      }
    } else {
      response = document.querySelectorAll(selector);
      if (response.length === 1) { response = response[0]; }
      else if (response.length < 1) { response = false; }
    }
  }

  return response;
};

使用起来很简单：

__("div")

或传递一些过滤器，例如：

__("div", "first")

我没有用它进行基准测试。希望对你有帮助。

【讨论】：

【解决方案2】：

仅仅因为你只想要一个选择器而不是整个 jQuery 库，并不意味着你必须自己动手。 jQuery 使用 Sizzle 选择器引擎，您可以自己轻松使用它，而无需完整的 jQuery：

http://sizzlejs.com/

【讨论】：

【解决方案3】：

您可以使用这个简单的if/else 语句来区分。这还允许您根据您引用的是类还是 ID 来运行其他代码。

var mySelector = ".class-name";

if(mySelector.charAt(0) == ".")
{
    document.getElementsByClassName(mySelector.substring(1));
}
else if(mySelector.charAt(0) == "#")
{
    document.getElementsById(mySelector.substring(1));
}

【讨论】：

为什么不mySelector.charAt(0)？
@Ian，是的，这也可以。真的只是个人喜好。
没错，但charAt 更快（尽管可能不明显），并且在语义上更有意义。不过，个人喜好是因素
请注意 getElementsByClassName 在 IE8 及以下版本中不起作用。 caniuse.com/#search=getElementsByClassName
@Ian 不妨改成charAt。它确实需要更少的代码字符。

【解决方案4】：

改为查看document.querySelector 或document.querySelectorAll。两者都可以通过 ID 或类（以及其他选择器）查找元素。 querySelector 将返回 1 个元素，querySelectorAll 将返回所有元素。

var mySelector = ".class-name", // "#id-name" will also work fine.
elements = document.querySelectorAll(mySelector);

请注意，这在 IE http://caniuse.com/#search=querySelectorAll）。 polyfill 将是处理它以添加 IE7 支持的最佳方式。

【讨论】：

虽然这是一个很好的解决方案，但可能值得注意的是，这在 IE
另外，浏览器原生查询选择器的实现比 JavaScript 字符串操作要快得多。
@Steve, querySelectorAll 比 getElementsByClassName 有更好的浏览器支持。 Clicky
@Steve 好点。我已经更新了我的答案以指出这一点。如果需要 IE7 支持，建议使用 polyfill。
是的，但如果两个元素具有相同的id（它们不应该），querySelectorAll 将返回两者

【解决方案5】：

我认为的第一种方法是检查笔画的第一个符号。比如：

var $ = function( string ) {
  var result;
  switch (string.substr(0,1)) {
    case '.': result = document.getElementsByClassName(string); break;
    case '#': result = document.getElementById(string); break;
    default: result = document.getElementsByTagName(string); break;
  }
  return result;
}
var mySelector = ".class-name";
console.log( $(mySelector) );

【讨论】：