将 document.getElementById 设置为变量答案

【问题标题】：Set document.getElementById to variable将 document.getElementById 设置为变量
【发布时间】：2012-03-21 20:53:32
【问题描述】：

以下作品：

    $ = document.form;
    x = $.name.value;

这不是：

    $ = document.getElementById;
    x = $("id").value;

关于为什么这不起作用或如何做到这一点的任何想法？

【问题讨论】：

您可能会在这篇文章/答案的字里行间找到答案：stackoverflow.com/a/9612657/77047
我不确定它本身是否完全相同，但这与 stackoverflow.com/questions/6398787/…

标签： javascript variables getelementbyid

【解决方案1】：

this 的值取决于你调用函数的方式。

当您调用 document.getElementById 时，getElementById 会得到 this === document。当您将getElementById 复制到另一个变量然后将其调用为$ 时，然后this === window（因为window 是默认变量）。

这会导致它在窗口对象中而不是在文档对象中查找 id，并且由于窗口不是文档并且没有相同的方法，因此非常失败。

您需要在通话中维护document。您可以为此使用包装函数，例如

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

...但请不要使用$。这是一个可怕的名字。它没有任何意义，它会让看到它的人感到困惑并认为“啊！我知道 jQuery！”或“啊！我知道原型”等等。

【讨论】：

$ 有“id 选择器方法”的意思，这样就可以了。
@Bergi — 不，它没有。例如，在 jQuery 中，这意味着“从 CSS 选择器获取元素集合或从 HTML 片段生成节点集合或在 DOMReady 时运行此函数事件触发”。
看看these comments。此外，jQuery 是一个很好的例子，为什么你不应该重载超级骗子集合选择器函数。

【解决方案2】：

上下文对象不同。当您获得一个函数的引用时，您正在更改该上下文对象：

var john = {
    name : "john",
    hello : function () { return "hello, I'm " + this.name }
}

var peter = { name : "peter" };

peter.hello = john.hello;

peter.hello() // "hello, I'm peter"

如果你想要一个引用函数绑定到一个特定的上下文对象，你必须使用bind：

peter.hello = john.hello.bind(john);

peter.hello(); // "hello, I'm john"

所以你的情况是：

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

【讨论】：

【解决方案3】：

不知道你想实现什么，但可以这样工作

$ = document.getElementById;
x = $.call(document, "id").value;

因为getElementById 仅在它是document 的函数时才有效，因为它需要范围。

但我会推荐@Quentin 的回答。

【讨论】：

【解决方案4】：

getElementById 是HTMLDocument 原型的方法（其中document 是一个实例）。因此，在全局上下文中调用该函数，你肯定会得到“Wrong this Error”之类的。

你可以使用

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

但是

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

也可以，也许更好理解。

【讨论】：

【解决方案5】：

如果您想实现类似的目标，我建议您使用jQuery。它们的 $ 符号比仅通过 id 获取元素要强大得多。

此外，如果您使用的任何平台已经使用 $ 作为变量（ASP .Net 有时会使用此变量），您可能会得到不可预知的结果。

【讨论】：