$("#myElement").length 与 !!$("myElement") 检查 dom 元素是否存在？答案

【问题标题】：$("#myElement").length vs. !!$("myElement") to check if the dom element exists?$("#myElement").length 与 !!$("myElement") 检查 dom 元素是否存在？
【发布时间】：2017-03-09 17:17:30
【问题描述】：

我需要检查某个 dom 元素是否存在。我看到其他帖子建议length 属性来检查。这很好用。但即使没有 length 属性，它也可以工作。例如：

!!$("#myElement");        // true
!!$("#myElement").length; // true

两种方式都返回相同的值。那么不使用length属性检查元素是否存在可以吗？

【问题讨论】：

您是否考虑过使用您知道不存在的元素（即长度返回 0）来测试它？结果可能会让您大吃一惊。
在大多数代码中，我看到 if ($("#myElement").length) {}，因为如果没有长度，那么它会评估为假，如果有长度，它会评估为真。
你得到了$("#myElement") 的误报，因为它不关心元素是否存在。 jQuery 将始终返回一个包含任何匹配元素的 jQuery 对象，因此请始终检查 .length 以查看其中是否实际存在元素。随意看看►https://learn.jquery.com/using-jquery-core/jquery-object/

标签： javascript jquery html dom

【解决方案1】：

不，总是使用length。

你的逻辑是有缺陷的，因为 jQuery 对象永远不会为空或 null，即使没有选择任何元素，它也总是返回一个对象，因此你不能可靠地将它强制转换为布尔值以查看选择器是否匹配任何元素。

console.log(!!$('#exists')); // should be true
console.log(!!$('#doesNotExist')); // should be false

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exists"></div>

正如您在上面看到的，两个测试都返回true。

【讨论】：

你是对的 !![] 返回真。我可以使用!!$("#myElement")[0] 吗？
你可以，但不要。 length 属性是公认的规范。
我很好奇为什么!![] 返回true？空数组不应该是假的吗？
通过索引访问 jQuery 对象会返回底层的 Element 对象（不是数组），当没有找到任何元素时，该 Element 将为 null，因此布尔强制有效。
我明白当与$('#doesNotExist')[index] 这样的索引一起使用时，我不明白为什么在 js 中真正考虑一个空数组。