如何使用jQuery验证DOM中是否存在元素？

通常在JavaScript中，我会执行以下操作来验证元素是否存在：

if (document.getElementById('lblUpdateStatus')) {
    $("#lblUpdateStatus").text("");
}

---

但是，使用jQuery-我如何做相同类型的事情呢？

问题是，如果元素存在，jQuery将只执行请求的操作：-）， 因此，您只需要：

$("#lblUpdateStatus").text("");

---

$

返回匹配元素的数组，因此请检查length属性，就可以开始了

if ($('#lblUpdateStatus').length) {
    $("#lblUpdateStatus").text("");
}

---

get方法返回匹配的DOM元素：

if($("#lblUpdateStatus").get(0)){
    $("#lblUpdateStatus").click(function () { ... });
}

---

但是我不确定它是否是一种快速的方法。

我认为没有理由仅仅为了它而使用jQuery。

$（“#lblUpdateStatus”）

基本上会直接转到

document.getElementById（'lblUpdateStatus'）

，因为选择器中有一个锚，所以您不会真正获得任何东西。此外，仅为了检查DOM对象是否存在，将其包装在jQuery对象中将产生大量开销

另一方面，如果您只想更改对象的文本属性，那么如果您使用jQuery，就不需要检查它是否存在

if (document.getElementById('lblUpdateStatus')) {
    $("#lblUpdateStatus").text("");
}

会做和刚才一样的事情

$("#lblUpdateStatus").text("");

---

我在网上写了一篇关于这个的帖子

---

如果HTML字符串可以传递到

$（）

，则可以使用

parent.length

：

$('<div>').length // 1, but it not exist on page

$（''）.length//1，但它不存在于页面上

但是

$（''）.parent（）.length//0

从jQuery 1.4开始，您可以使用

var测试=$（“”）；
$.contains（window.document，test[0]）；//假的
$（“正文”）。附加（测试）；
$.contains（window.document，test[0]）；//真的

我会用这个。计算节点列表的长度：

document.querySelectorAll('#lblUpdateStatus').length

---

Dupe：这与if（$（'#element_id'）.length）{console.log（'element_id'存在于DOM中'）；}（本质上是DanF上面的答案。）@Kieran:

document.getElementById（'lblUpdateStatus'）

可能更容易阅读（我不这么认为，但我想这是习惯问题），但是，如果您试图对该语句返回的内容执行某些操作，并且页面上没有此类元素，则可能会遇到空引用错误。在这种情况下，jQuery方法只会默默地不做任何事情（这可能不是OP想要的…），是的，如果它不在那里，它将返回null。为了通用模式和实现，我也不确定OP想要什么样的测试。如果你混合使用vanilla js和jquery来完成类似的任务，那么你的代码库将会非常糟糕。速度差异在98%的时间内不明显。此外，jquery还提供了基本的跨浏览器支持。您是否打算编写多行vanilla js来支持所有浏览器，只是为了在一行jquery上获得毫秒的性能？如前所述，您还必须检查空值，因此您可以从一行jquery而不是vanilla js中获得更多信息。其他答案适用于所问的问题，但如果您想检查dom中是否仍然存在引用的旧元素，这是唯一有效的答案。

$('<div>').parent().length // 0

var test = $("<div>");
$.contains(window.document, test[0]);  // false

$("body").append(test);
$.contains(window.document, test[0]);  // true

document.querySelectorAll('#lblUpdateStatus').length