$ wrap 函数和 getElementById 有什么区别？答案

【问题标题】：Any difference between a $ wrap function and getElementById?$ wrap 函数和 getElementById 有什么区别？
【发布时间】：2010-08-18 08:54:13
【问题描述】：

我的意思是这样的包装函数：

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

但在某些代码中是这样的：

oDiv1 = $("postInfoDiv");
oDiv2 = document.getElementById("postInfoDiv");
alert(oDiv1 == oDiv2);                     // return false
alert(oDiv1.style);                            // error
alert(oDiv2.style);                            // correct
alert(document.getElementById("postInfoDiv").style); // correct

正如 cmets 所暗示的，我得到了奇怪的结果。
我认为第一个警报应该返回 true，因为它们是同一个 dom 对象。
我认为第二个警报应该提醒“对象”或“CSS StyleDeclaration”之类的东西，而不是“定义”。

那么有什么问题呢？你有遇到过这样的问题吗？

谢谢。

【问题讨论】：

你试过alert(oDiv1.style)而不是alert(oDiv.style)吗？
第二个可能只是因为您从未声明“oDiv”，您声明了“oDiv1”和“oDiv2”但从未声明“oDiv”。
alert(oDiv1 == oDiv2); 正在为我返回 true。
@KennyTM 对不起。我写错了，应该是alert(oDiv1.style)。
您遇到的问题是什么浏览器？当我在 IE8 中运行它时，似乎对我来说工作正常。页面上有其他框架吗？

标签： javascript css

【解决方案1】：

您的 $ 函数可能被覆盖，可能被框架覆盖。

您应该尝试使用alert( oDiv1.nodeType ) 来查看它是否是 DOM 元素。 alert( oDiv1.length ) 看看它是否是一个空数组，因为您可能在同一页面上使用 jQuery，它会覆盖您的 $ 函数。

oDiv1 可能是一个类似数组的对象，如果包含 jQuery，则包含该项目。 oDiv2 是一个实际的 DOM 引用。您可能需要将oDiv1[0] 与oDiv1 进行比较，在其中您引用数组中指向实际 dom 元素的第一个元素以进行公平比较。

function $(id){return document.getElementById(id)}
$('content') == document.getElementById('content')
true

自定义 $ 函数可以完美运行，但如果您使用的是框架函数，它将返回类似数组的对象而不是 DOM 元素。

您还可以将函数重命名为 function getID 之类的名称，这将是唯一的，并且不会与框架 $s 冲突。

【讨论】：

你看问题中他的$函数了吗？那里没有数组。
为什么oDiv1 会是一个数组？
他很可能不小心使用了另一个 $ 函数，而不是他定义的函数。也许他在同一页面上有原型/jQuery。否则不等于假。
@meder：是的，我在同一页面上有 jQuery。你是怎么知道的？但是我已经搜索了 jQuery 源代码，但找不到函数名称 $()，尽管我确信 jQuery 有一个。
jQuery 被定义为window.$。您可以使用jQuery.noConflict 让jQuery 不使用$，但它会破坏您的代码。如果您在没有 jQuery 的页面中尝试此操作，它将完美运行。 Soo，我建议重命名您的函数或不使用您的自定义 $，因为您已经在使用 jQuery。您的功能与仅使用 gEBI 没有区别。

【解决方案2】：

我对此的主要担心是，当某人第一次阅读您的代码时，他们会感到困惑，特别是如果他们习惯于使用 JavaScript 框架（如 jQuery）进行编码。

仅出于这个原因，我建议您不要将这种特殊语法用于您的 wrap 函数。

【讨论】：

要求 OP 不要使用方便的速记，因为它在其他库中很常见，这似乎不是他问题的合理答案。使用该逻辑 jQuery 不应该使用 $ 因为 Prototype 使用，反之亦然。您不能因为 $() 函数而假设 JS 项目使用特定的库。
接受的答案基本上和我说的一样——重命名他的函数，因为它与 jQuery 冲突。
我正想说同样的话。

【解决方案3】：

顺便说一句，即使没有加载 jQuery，Firebug 也提供了自己的 $ 函数，这可能会造成混乱。

【讨论】：

哦，我也用 Firebug 调试过这个页面。