处理 document.getElementById 抛出 nullreference 错误的更好方法是什么

Question

我尝试从 html 中获取一些可能存在或不存在的元素。现在，如果我只是尝试

//previous code
document.getElementById("MyElement1").checked = false;
document.getElementById("MyElement2").checked = false;
...
//rest of the code

如果其中一个元素不存在，则其余代码将不会被执行。

我会做的

try {
   document.getElementById("MyElement1").checked = false;
   document.getElementById("MyElement2").checked = false;
   ...
} catch (e) {
   console.log(e);
}

但据说你永远不应该使用 try...catch 来处理非严重错误。

如果其中一个元素不存在，是否有更优雅的方式让 javascript 忽略这行代码？

PS：如果这些元素之一不存在，则以下元素也不存在。因此，如果MyElement1 存在，而MyElement2 不存在，那么MyElement3、MyElement4 等也将不存在。

我还尽量避免使用大块代码，例如对这些元素中的每一个都使用 if

Answer 1

if 语句的种类

document.getElementById("MyElement1") && (document.getElementById("MyElement1").checked = false);

如果元素存在，则document.getElementById("MyElement1")会因为&&条件而为真，只有元素存在时JS才会执行赋值。

Answer 2

使用条件可能会为您解决问题。如果 MyElement 存在，这个 sn-p 会更改它的检查值，如果它不存在，它会更改一个虚拟对象的值。

(document.getElementById("MyElement") || {}).checked = false

function check(value)
{
  (document.getElementById("MyElement") || {}).checked = value;
  (document.getElementById("MyElement2") || {}).checked = value; // Doesn't exist but is OK
}

<input type="checkbox" id="MyElement" value="1"></input>
<input type="button" onclick="check(true)" value="Check it"></input>
<input type="button" onclick="check(false)" value="Uncheck it"></input>

Answer 3

如果我是你，我会这样做：

1. 为所有元素添加一个通用类名（比如 myElement）。
2. 使用 document.getElementsByClassName 一次性检索所有元素。
3. 迭代它们以设置返回元素的检查值

解决方案类似于以下：

//previous code
const els = document.getElementByClassName("myElement");
Array.from(els).forEach((el) => { el.checked = false; });
...
//rest of the code

Answer 4

我不知道这是否是最好的方法。 但是，我会这样处理。

<div id="example">
 <span>I exist</span>
</div>

<div id="result">
 No result yet.
</div>
<div id="result2">
 No result2 yet.
</div>

function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}
let result = document.getElementById('result')
let result2 = document.getElementById('result2')

const test = document.getElementById('example')
const hello = document.getElementById('hello')
result.innerText = isInPage(test)
result2.innerText = isInPage(hello)
console.log(isInPage(test))

在此处阅读有关 API 的更多信息

• Node.contains()

Answer 5

我不认为try catch有什么问题，它是标准方法之一，用它来应用逻辑是没有坏处的。