getElementById 并在 null 时跳过

Question

当它 returns 为 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 这样的 基于元素的 。有一个沿着这条路开始的例子。

Answer 2

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

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

getElementById 并在 null 时跳过

getElementById and skip if null

javascript

getelementbyid