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"
}

getElementById，如果为null则跳过

2 个答案: