在 Javascript 中为 document.getElementById 设置别名答案

【问题标题】：Make alias to document.getElementById in Javascript在 Javascript 中为 document.getElementById 设置别名
【发布时间】：2010-10-31 13:32:15
【问题描述】：

如何给函数“document.getElementById”起别名我已经看到它使用 $

谢谢

【问题讨论】：

一个更聪明的问题是询问如何在任何深度创建别名；例如document.getElementById('example').tag('div') 虽然像往常一样我会问这个问题并最终将它标记为一个 dup 一个 dup。 ??????

标签： javascript function alias

【解决方案1】：

当您看到 $() 函数时，它可能是一些库，例如 jQuery 或 Prototype。 $ 函数不是 document.getElementById 的别名，而是一个扩展函数功能的包装器。

要创建自己的包装器，您可以编写一个函数“alias”：

var alias = document.getElemenyById;

或

function alias(id) { return document.getElementById(id); }

但实际上，我会使用可用的库之一，例如 jQuery 或 Prototype。

【讨论】：

+1 但你应该解释一下创建“别名”的原因很简单，因为 javascript 具有一流的功能
在任何情况下/使用此别名在 IE6/7 中都不会起作用吗？我今天在一些较旧的代码中发现了它的错误，并且通过用 document.getElementById 替换别名来解决问题。我实际上使用了上面第二种类型的函数“别名”。有什么想法吗？
此答案的“var alias = document.getElementById”部分不正确。此处演示的创建别名在 Firefox 或 Google Chrome 中不起作用。请参阅stackoverflow.com/questions/1007340 了解更多信息。
补充格兰特瓦格纳的评论，alias = document.getElementById 不起作用的原因是当您调用alias() 时，它没有将文档作为this 传递给函数。

【解决方案2】：

这是我在自己的库中使用的东西。 DOM 是类，$ 是一个函数，它是 getElementById 函数的快捷实现：

function DOM()
{
  this.$ = function(elementIDs)
  {
    var el;

    // If an array of element names is passed.
    if (arguments.length > 1) 
    {
      var elements = [];
      var length = arguments.length;
      for (var i = 0; i < length; i++)
      {
        // Call this function recursively for each passed parameter.
        elements.push(this.$(arguments[i]));
      }
      return elements;
    }

    // If a single element name is passed.
    if (typeof(elementIDs) == "string")
    {
      el = document.getElementById(elementIDs);
    }
    return el;
  }
}

用法：

var el = new DOM().$("elementID");

您可以将其作为顶级窗口元素的别名。

【讨论】：

为什么要使用没有任何状态的构造函数？应该是var DOM = {'$': function(ids) {...}}。此外，您的回答比要求的要多得多，OP 要求为 document.getElementById 提供别名。如果你想要 jQuery 行为，只需使用 jQuery 而不是重新发明轮子

【解决方案3】：

function $( s ) {
    return document.getElementById( s ) ? document.getElementById( s ) : "";
}

$( "myId" );

这假设您只想使用美元函数（选择器）来获取 ID。我没有对此进行测试，但它应该可以工作。

上次看 jQuery 的核心，它把一个字符串作为参数，然后用正则表达式来判断它是什么类型的选择器。

【讨论】：

@hal10001：这对我来说“闻起来”很可怕。调用 document.getElementById() 两次似乎很浪费，这个函数返回一个 HTMLElement 或一个字符串。 'return document.getElementById(s);'怎么样？ ?
您可以根据需要返回 null 而不是字符串。在 jQuery 中，如果没有找到 ID，则返回一个空的 jQuery 对象。如果你不做类似的事情，那么你就会变得不确定。所有这一切实际上只是给出了一个美元选择器的例子。
他没有要求 jquery $ 函数，只是 document.getElementById 的别名。

【解决方案4】：

可能是最简单/最短的方法：

function $(id) { return document.getElementById(id); };

【讨论】：

这不是最短的方法，当然也不是最有效的。完全没有必要将相同的上下文应用于没有Function.apply 的函数。最短的形式是function $(s) { return document.getElementById(s) }
你是对的。我认为 getElementById 可能需要一个可选的第二个范围参数，但搜索规范 (w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId) 并非如此。已修改。
这是回答问题而不试图添加各种装饰

【解决方案5】：

facebook's connect-js 在src/core/prelude.js 中执行以下操作：

if (!window.FB) {
  FB = {
    // ...
    $: function(id) {
      return document.getElementById(id);
    }
    // ...
  }
}

然后，要使用它，他们会这样做：

FB.$('name-of-id');

初始块创建全局对象 FB。他们使用这个对象 FB 作为命名空间，并在其中定义所有对象、属性和函数。这样，只要其他代码不使用全局对象 FB，它就可以与其他 JavaScript 代码一起使用。

【讨论】：

非常不错的一个，对于这些类型的别名

【解决方案6】：

var $ = document.getElemenyById.bind( document );

【讨论】：

我喜欢这已经有六年的错字了，没有人说什么。不过，很好的解决方案！

【解决方案7】：

ES6 中引入的新特性让我们改进了 Chris Lloyd 的回答，简化了：

function $(id) { return document.getElementById(id); };

到：

const $ = id=> document.getElementById(id);

【讨论】：