javascript - 当 getElementById 返回 null 时取消对属性/方法的访问

Question

由于各种原因，有时当我调用document.getElementById一个 DOM 元素时，我得到一个空引用。这很好，除非我尝试立即访问空引用的某些属性/方法，我会得到一个错误。

例如，使用以下代码，如果 DOM 中没有 ID 为 的元素a，则尝试访问style返回null值的属性将失败：

document.getElementById('a').style.background = 'red';

有没有办法编写document.getElementById用于获取 DOM 元素的函数等，并且在null返回事件时，取消对该空引用的 DOM 属性/方法的任何立即访问尝试？

先感谢您。

Answer 1

只需将其存储在一个变量中，这样您还可以缓存对您的元素的引用：

var aTag = document.getElementById('a');
if(aTag != null) {
  aTag.style.background = 'red';
}

但是如果你真的想要一个函数，你可以将一个匿名函数传递给一个只有在第一个参数不为空时才被调用的方法：

safeAccess(document.getElementById("aTag"), function(a) {
  a.style.background = 'red';
});

function safeAccess(elem, scriptToExecute) {
  if(elem != null) {
    scriptToExecute(elem);
  }
}

Answer 2

您可以将其包装在 try/catch 块中。无论该块内发生什么，执行都将继续。但是“可以”并不意味着“应该”。像这样编写的代码可能更难调试。

try {
    document.getElementById('a').style.background = 'red';
} catch (o) {}

Answer 3

只需先检查它是否为空。

if (document.getElementById('a'))
    document.getElementById('a').style.background = 'red';