如何从 jQuery 选择器中获取 DOM 元素？

Posted 2023-05-09

【中文标题】如何从 jQuery 选择器中获取 DOM 元素？

【英文标题】：How to get a DOM Element from a jQuery selector?

【发布时间】：2010-12-13 06:26:36

【问题描述】：

我很难从 jQuery 选择器中找到实际的 DOMElement。

示例代码：

<input type="checkbox" id="bob" />
var checkbox = $("#bob").click(function()  //some code   )

在另一段代码中，我试图确定复选框的选中值。

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

请，我不想这样做：

  if ( checkbox.eq(0).is(":checked"))
    //do something

这让我绕过了复选框，但其他时候我需要真正的DOMElement。

【问题讨论】：

可能需要这样做的一种情况：在 Knockout.js 中，函数 applyBindings 需要一个 DOM 节点而不是 jQuery 选择器。这个问题（及其答案）正是我们所需要的。

【参考方案1】：

您可以通过以下方式访问原始 DOM 元素：

$("table").get(0);

或更简单地说：

$("table")[0];

然而，实际上你并不需要这个（根据我的经验）。以您的复选框为例：

$(":checkbox").click(function() 
  if ($(this).is(":checked")) 
    // do stuff
  
);

更“jquery'ish”并且（恕我直言）更简洁。如果你想给它们编号怎么办？

$(":checkbox").each(function(i, elem) 
  $(elem).data("index", i);
);
$(":checkbox").click(function() 
  if ($(this).is(":checked") && $(this).data("index") == 0) 
    // do stuff
  
);

其中一些功能还有助于掩盖浏览器中的差异。有些属性可能不同。经典的例子是 AJAX 调用。要在原始 javascript 中正确执行此操作，XmlHttpRequest 有大约 7 个后备案例。

【讨论】：

谢谢，但是 get 方法仍然返回 jquery 元素，而不是 dom 元素。否则 .checked 属性调用会起作用。

在此页面上的 Firebug 中尝试 $('a').get(0).nodeType==1，它评估为真还是失败？

@BillRob 如果 get() 没有返回 DOM 元素，则有问题。在此处查看文档：docs.jquery.com/Core/get#index

$('<input type=checkbox>').appendTo('body').get(0).checked

如果要显式使用 DOM 属性，那么使用 jQuery 有什么意义？拥有对可能的 TypeError 进行防错的一致代码不是更好吗？几年前，我曾经是一名精英 ECMAScripter，并避免使用框架，但我对不一致之处了解得越多，我最终就越依赖。浏览器引擎只会越来越快，除非速度很明显，否则您不应该真正担心这一点。使用框架的全部意义在于有可行的一致代码解决许多问题，而不是尽可能快地完成工作。

【参考方案2】：

编辑：似乎我假设您无法获取该元素是错误的。正如其他人在此处发布的那样，您可以通过以下方式获得它：

$('#element').get(0);

我已经验证这实际上返回了匹配的 DOM 元素。

【讨论】：

重复我自己，但又一次......不是在所有浏览器中。在 IE7 及更早版本中失败。

【参考方案3】：

我需要将元素作为字符串获取。

jQuery("#bob").get(0).outerhtml;

这会给你类似的东西：

<input type="text" id="bob" value="hello world" />

...作为字符串而不是 DOM 元素。

【参考方案4】：

如果您需要直接与 DOM 元素交互，为什么不直接使用document.getElementById，因为如果您尝试与特定元素交互，您可能会知道 id，假设类名仅在一个元素上或其他一些选择往往是有风险的。

但是，我倾向于同意其他人的观点，即在大多数情况下，您应该学习使用 jQuery 为您提供的功能，因为它非常灵活。

更新：基于评论： 这是一个很好解释的帖子：http://www.mail-archive.com/[e-mail]/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

如果选中则返回值，否则返回 0。

$(this).val() 只是进入 dom 并获取元素的属性“值”，无论它是否被检查。

【讨论】：

我可以使用 document.getElementById 或 MS ajax $get 方法。由于 MS 支持 jquery，我试图打破对 ms ajax javascript 的依赖并学习 jquery。 jquery 会改变复选框 .val() 方法的行为似乎完全违反直觉。因为所有其他 .val() 调用都会返回表单发布字段。 jQuery 非常好用，所以更改 val() 方法会让人感到困惑，并希望找到一个快速的解决方法。

所以看看这个页面：mail-archive.com/[e-mail]/msg04461.html

奇怪的是 James val() 方法实际上是 .attr("value")。我想知道为什么他们有两种不同的方法。对我来说 .val() 是表单 post 字段的值。

@BillRob - jQuery 只是简化和标准化了如何获取价值，而不是你必须去实际的元素并自己做。

有时你需要一个带有 ID 和父子场景的复杂选择器，你可以通过 jQuery 用一行代码得到它，但使用 document.getElementById 需要一天的时间。我同意混合库是一个坏主意，但它有时会发生，从 jquery 对象获取 DOM 元素的任务非常困难，尤其是在 .get(0) 不具有浏览器兼容性的情况下。