11

检查javascript中是否存在DOM元素的最佳实践是什么？

是否应该在使用之前检查一个项目是否存在，像这样？

if ($("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "").size() != 0) {
  var row = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "");
}

这不会执行packageId.removeSpecialChars().toUpperCase()两次吗？

或者这会是更好的选择吗？

var row = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + ""); 
if (row)
{
  // do something
}

但是，找不到时不会抛出异常吗？

4

5 回答 5

21

当您实际使用 DOM 元素时，是的，您应该在尝试使用它之前检查它是否存在以避免 JavaScript 错误。但是，您不是在使用 DOM 元素，而是在使用一个（可能）包含 DOM 元素的 jQuery 对象。

jQuery 函数已经处理了其元素集中没有匹配项的情况，因此您无需在尝试使用它们之前明确地检查自己是否存在元素。仅当您尝试使用.get()函数或[index]方括号表示法从该集合内直接引用 DOM 元素时，您才需要这样做。

顺便说一句，.size()jQuery 函数在 1.8 版本中被弃用，你应该length直接使用 jQuery 对象的属性来检查是否有元素，所以：

var $object = $('a-selector');
if($object.length) {
    // there's at least one matching element
}
于 2013-03-05T11:51:15.020 回答
1

一般编程约定说不要重复自己。因此，在这种情况下，您至少可以只查找一次并保留变量引用：

var thing = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "");

然后选择查找不会发生两次，删除多余的方法调用等。这还有一个好处是允许您编写更多不言自明的代码，当您可以将变量命名为有意义的东西时，除了thing，或者，eeek！, a（尽管代码不一定更有意义，但人们仍然使用类似的名称a！）

if (thing != null) { }
if (thing.size() != 0) {

} 
etc.

至于多次调用方法，这往往是不可避免的。

于 2013-03-05T11:44:56.330 回答
1

最好缓存它：

var machId = $("#" + machineId + packageId.removeSpecialChars().toUpperCase());
if (machId.size() != 0) {
   var row = machId;
}
于 2013-03-05T11:47:31.190 回答
0

确实如此，您需要的是：

var a = $("#" + machineId + packageId.removeSpecialChars().toUpperCase() + "");
if (a.size()) {
    var row = a;
}
于 2013-03-05T11:45:03.083 回答
0

您基本上需要查看 DOM 元素是否存在于您的 HTML 中，但请记住，如果您的 DOM 中不存在该元素，jQuery 不会引发致命错误，但检查是一个好习惯，它增加了一个更安全的在你的代码层上，有一个叫做 .size() 的东西从 1.8 版开始被弃用，所以即使你使用旧版本的 jQuery，也不建议使用，所以目前最好的解决方案是下面的代码：

if($('.class').length) { // check if any element with this class exist, if not exist, it return 0 and can not pass the if estatement
    // do something
}
于 2017-02-05T11:47:11.367 回答