javascript - getElementById 并在 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有一个沿着这条路开始的例子。