javascript - getElementById，如果为null则跳过

当它返回null时，它将不运行下一个getElementById。构造此内容的最佳方法是什么？将有12个可能的getElementById，但一个页面可能只有2-4个

document.getElementById("routeTwoName").textContent = "Tim";
document.getElementById("routeThreeName").textContent = "David";
document.getElementById("routeFourName").textContent = "Ricky";
document.getElementById("routeTenName").textContent = "Ric";

<div class="panel-body">
  <h4><span id="routeTwoName">Name</span></h4>
</div>

<div class="panel-body">
  <h4><span id="routeTenName">Name</span></h4>
</div>

最佳答案

通常，当您具有这种重复的逻辑时，可以将逻辑封装在一个函数中：

function setText(id, text) {
    var element = document.getElementById(id);
    if (element) {
        element.textContent = text;
    }
    return element;
}

那么您可以执行以下操作：

setText("routeTwoName", "Tim");
setText("routeThreeName", "David");
setText("routeFourName", "Ricky");
setText("routeTenName", "Ric");

这是问题的摘录的更新版本：

function setText(id, text) {
    var element = document.getElementById(id);
    if (element) {
        element.textContent = text;
    }
    return element;
}
setText("routeTwoName", "Tim");
setText("routeThreeName", "David");
setText("routeFourName", "Ricky");
setText("routeTenName", "Ric");

<div class="panel-body">
  <h4><span id="routeTwoName">Name</span></h4>
</div>

<div class="panel-body">
  <h4><span id="routeTenName">Name</span></h4>
</div>

另一个选择是给自己一堆基于集合的DOM操作函数（例如jQuery的API，但不使用jQuery [当然，除非您想要；它已经编写和测试过]），而不是像DOM那样基于元素的函数。 My answer here有一个开始该路径的示例。