javascript - 简单的 JavaScript 选择器

Question

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

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

var mySelector = ".class-name";

或者

var mySelector = "#id-name";

然后根据 ifmySelector持有一个 Class 或 ID 我会运行

document.getElementsByClassName

或者

document.getElementsById

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

Answer 1

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

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

请注意，这在 IE < 8 中不起作用（请参阅http://caniuse.com/#search=querySelectorAll）。polyfill 将是处理它以添加 IE7 支持的最佳方法。

Answer 2

您可以使用这个简单的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));
}

Answer 3

我认为的第一种方法是检查中风的第一个符号。就像是：

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) );

Answer 4

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

http://sizzlejs.com/

Answer 5

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

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")

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