getElementById和跳过if null

Question

当它返回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>

​

Answer 1

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

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有一个启动该路径的示例。

Answer 2

所以，设置一个变量，看看它是否存在。

var x = document.getElementById("foo");
if (x) {
    x.textContent = "bar"
}