将document.getElementById赋值给变量

Question

以下操作是可以正常运行的：

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

这不行：

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

有什么想法，为什么这不起作用或者如何使它起作用？

- Bret Thomas

---

你可能会在这篇帖子/答案的文字之间找到你的答案：https://dev59.com/QGHVa4cB1Zd3GeqPlUuo#9612657 - Chris Tonkinson

我不确定这是否是一个完全的重复，但它涵盖了与https://dev59.com/aWw15IYBdhLWcg3wy-vO相同的内容。 - lonesomeday

Answer 1

this的值取决于您如何调用函数。

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

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

您需要在调用中保持document。您可以使用包装器函数来实现此目的，例如：

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

...但请不要使用$。这是一个糟糕的名称，它没有意义，会让看到它的人感到困惑，以为“啊！我知道jQuery！”或者“啊！我知道Prototype”等等。

- Quentin

---

$具有“id选择器方法”的含义，因此一切都没问题。 - Bergi

@Bergi — 不是的。比如在 jQuery 中，它的意思是“从 CSS 选择器中获取元素集合 或者 从 HTML 片段生成节点集合 或者 当 DOMReady 事件触发时运行此函数”。 - Quentin

看一下这些评论。此外，jQuery是一个非常好的例子，说明为什么不应该过度使用超级集合选择器函数。 - Bergi

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

- ZER0

Answer 3

我不知道你想要达到什么目的，但是可以按照以下方式实现

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

因为所需的作用域，getElementById仅在作为document的一个函数时才起作用。

但是我推荐使用@Quentin的答案。

- Diode

Answer 4

getElementById是HTMLDocument原型的一个方法（其中document是一个实例）。因此，在全局上下文中调用该函数，您肯定会得到一个“错误的this错误”或类似的内容。

您可以使用

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

但是

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

使用

也可以，而且可能更易于理解。

- Bergi

Answer 5

如果你想要实现这样的功能，我建议使用jQuery。它们的$符号比仅通过id获取元素更加强大。

另外，如果你正在使用任何已经将$作为变量的平台（ASP .Net有时会使用此变量），那么你可能会得到不可预测的结果。

- Kevin Green