检测 DOM 对象与 jQuery 对象答案

【问题标题】：Detect DOM object vs. jQuery Object检测 DOM 对象与 jQuery 对象
【发布时间】：2010-11-10 00:06:47
【问题描述】：

我有一个函数，我希望它能够允许传入常规的 javascript DOM 元素对象或 jQuery 对象。如果它还不是一个 jQuery 对象，我将把它变成一个。

有没有人知道一种非常可靠的检测方法。

function functionName(elm){
   //Detect if elm is not a jquery object in condition
   if (elm) elm = $(elm);

}

一种合乎逻辑的方法是检测 DOM 元素对象的属性之一。问题是，哪种属性最可靠？

我也可以让它成为一个 jquery 对象，因为 jQuery 没有类似的问题： $($imajQueryObjAlready);但是，这个问题的目的不仅仅是解决问题，而是找到一种很好的方法来检测它是 DOM 对象还是 jQuery 对象。

【问题讨论】：

标签： javascript dom jquery

【解决方案1】：

要测试 DOM 元素，您可以检查其nodeType 属性：

if( elm.nodeType ) {
    // Was a DOM node
}

或者你可以检查 jQuery 属性：

if( elm.jquery ) {
    // Was a jQuery object
}

【讨论】：

+1 两个出色的解决方案——我更喜欢后者，因为它易于阅读。
@lonesomeday - 我唯一会给出（或应该给出）的免责声明是它不是公共 API 的一部分，currently anyway，因此 jQuery 可能决定有一天会删除该属性。不过值得怀疑。
是的。当然，反过来，jQuery 也可以决定添加一个nodeType 属性！
function isJQuery( o ) { return null !== o && CS.object === typeof o && o.jquery; } function isDOM( o ) { return null !== o && CS.object === typeof o && o.nodeType; }

【解决方案2】：

要测试 jQuery 对象，您可以使用 instanceof 运算符：

if(elm instanceof jQuery) {
    ...
}

或：

if(elm instanceof $) {
    ...
}

【讨论】：

【解决方案3】：

jQuery 是这样做的：

if ( selector.nodeType )

（jQuery 1.4.3，第 109 行）

【讨论】：

【解决方案4】：

最简单的方法是简单地将它传递给 jQuery 函数。如果它已经是一个 jQuery 对象，它将原样返回：

function(elem){
   elem = $(elem);
   ...
}

从 jQuery 源代码来看，这就是正在发生的事情：

if (selector.selector !== undefined) {
    this.selector = selector.selector;
    this.context = selector.context;
}

return jQuery.makeArray( selector, this );

makeArray 将新的（默认）jQuery 对象与传入的对象合并。

【讨论】：

它并没有真正改变。你得到一个新的 jQuery 对象。可能会有副作用。这是一个演示：jsfiddle.net/nu7D6
@Patrick - 不，如果原来的 jQuery 对象已经是 jQuery 对象，你会得到它。 $(selector) === $($(selector)) 总是返回 true。
@Patrick 看看我的编辑，在哪里引入了副作用？
@James - 你确定吗？请参阅我上面评论中的示例。您评论中的示例绝对不是 ===，因为您实际上是在创建 3 个完全独特的对象。
@Patrick 它们不是同一个对象，但这并不意味着正在执行任何引起副作用的操作。看看 jQuery 源代码（或我的答案中的摘录）。

【解决方案5】：

elm instanceof jQuery 是最简单的方法，因为测试elm.nodeType 会将{nodeType:1} 误认为是 DOM 元素，而测试elm.jquery 会将{jquery:$()} 误认为是 jQuery 对象，而且无法保证未来jQuery 对象不会有 jquery 属性。

【讨论】：

【解决方案6】：

优雅的方式：

function is_jquery_object(x) {
    return window.jQuery && x instanceof jQuery;
}

function is_dom_object(x) {
    return window.HTMLElement && x instanceof HTMLElement;
}

基于@karim79 的回答，如果您需要确定它是 DOM 或 jQuery 对象，请使用这些测试。（window 测试有助于函数在未定义类时优雅地失败，例如 jQuery 加载失败。）

【讨论】：