如何修复未捕获的TypeError

Question

以下代码行导致未被捕获的TypeError：

document.getElementById('leaveblank').className = "noshow";

我知道这是因为DOM中没有#leaveblank ID（脚本在另一个页面上使用）。我也知道解决这个问题的方法可能是添加一个IF语句。

但是，我不确定这个语法应该是什么样的，或者我是否需要先将getElement设置为var？

以下完整控制台错误以供参考：

Uncaught TypeError: Cannot set property 'className' of null 

Answer 1

正如您引用的错误所暗示的那样，document.getElementById()如果找不到您提供的ID的元素，则返回null。所以：

var el = document.getElementById('leaveblank');
if (el != null)
    el.className = "noshow";

您可以将if条件简化为：

if (el)

...因为如果找到一个元素，那么el将成为一个对象，所有对象都是＆＃34; truthy＆＃34;。

如果您正在使用jQuery（正如您对问题的标记所暗示的那样），您不必担心该元素是否存在，您可以这样做：

$("#leaveblank").attr("className", "noshow");
// or, if you just want to add the class to the element
$("#leaveblank").addClass("noshow");

$("#leaveblank")部分创建一个包含一个或零个元素的jQuery对象;像.attr()或.addClass()这样的jQuery方法对它们被调用的jQuery对象中的任何元素进行操作，如果没有元素则没有错误。

Answer 2

试试这个

var lb = document.getElementById('leaveblank');
if(lb)
 lb.className = "noshow";

Answer 3

使用jQuery不会有任何错误，因为jQuery负责这个：

$('#leaveblank').attr('class', 'noshow');

纯JS将是：

if (document.getElementById('leaveblank').length) {
    // code
}

Answer 4

我知道检查元素是否实际存在的最佳方法是检查其长度属性，如下所示：

if (document.getElementById('leaveblank').length == 0)
{
    // Element does NOT exist in the DOM
}

Answer 5

是。您应该始终在变量中获取元素并检查它是否为null，然后对其进行进一步操作。