时间戳

首页 > 解决方案 > getElementById 并在 null 时跳过

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>

标签： javascriptgetelementbyid

解决方案

一般来说，当你有这种重复的逻辑时，你将逻辑封装在一个函数中：

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 这样的基于元素的函数。我在这里的回答有一个开始走这条路的例子。

推荐阅读