如何在HTML元素中实现可迭代和可扩展的参数选择

本教程探讨了在JavaScript中动态选择HTML元素以实现代码可扩展性的方法。针对硬编码元素ID的局限性，文章详细介绍了如何使用模板字面量和字符串拼接技术来构建可迭代的`getElementById`参数。通过重构一个灯泡控制示例，展示了如何高效管理和操作大量相似的DOM元素，从而提升代码的灵活性和维护性。

引言：动态管理HTML元素的挑战

在现代Web开发中，我们经常需要操作一组具有相似功能或外观的HTML元素。例如，一个图片画廊、一个待办事项列表或一个交互式仪表盘中的多个组件。当这些元素的数量较少时，我们可能会为每个元素手动编写JavaScript代码。然而，一旦元素数量增加，这种硬编码的方式就会变得低效、难以维护且缺乏扩展性。

考虑一个简单的场景：控制多个灯泡的开关。如果每个灯泡都有一个唯一的ID（如bulb0、bulb1、bulb2），并且我们希望通过JavaScript来控制它们，那么手动编写针对每个ID的代码将是一个重复且繁琐的任务。本教程将深入探讨如何克服这一挑战，通过动态生成元素ID来实现可迭代和可扩展的DOM操作。

硬编码ID的局限性

让我们从一个典型的硬编码示例开始，如下面的HTML和JavaScript代码所示：

立即学习“前端免费学习笔记（深入）”；

<!-- 部分HTML代码 -->
<img id="bulb0" src="pic_bulboff.gif" style="width:50px">
<img id="bulb1" src="pic_bulboff.gif" style="width:50px">
<img id="bulb2" src="pic_bulboff.gif" style="width:50px">

<script>
    function turnOn() {
        document.getElementById('bulb0').src = 'pic_bulbon.gif';
        document.getElementById('bulb1').src = 'pic_bulbon.gif';
        document.getElementById('bulb2').src = 'pic_bulbon.gif';
        console.log('所有灯已开启');
    }

    function turnOff() {
        document.getElementById('bulb0').src = 'pic_bulboff.gif';
        document.getElementById('bulb1').src = 'pic_bulboff.gif';
        document.getElementById('bulb2').src = 'pic_bulboff.gif';
        console.log('所有灯已关闭');
    }
</script>

这段代码能够正常工作，但它的主要问题在于可扩展性差。如果灯泡的数量从3个增加到10个，甚至更多，开发者将不得不手动修改turnOn和turnOff函数，添加更多的document.getElementById('bulbN')行。这不仅增加了开发时间，也极易引入错误，并且使得代码难以阅读和维护。我们的目标是找到一种方法，能够通过一个循环或其他迭代机制，动态地生成这些ID，从而使代码能够适应任意数量的相似元素。

实现可迭代的HTML元素选择

为了解决硬编码ID的问题，我们需要一种机制来动态地构建传递给document.getElementById()方法的字符串参数。JavaScript提供了几种强大的字符串操作方式，可以帮助我们实现这一目标。

灵机语音

灵机语音

下载

方法一：使用模板字面量（Template Literals）

模板字面量（Template Literals），也称为模板字符串，是ES6引入的一项特性，它提供了一种更简洁、更易读的方式来创建字符串。它们使用反引号 (`) 包裹，并允许在字符串中嵌入表达式，表达式会被求值并转换为字符串。

语法:

`这是一个${variable}的字符串。`

应用示例：

利用模板字面量，我们可以非常优雅地构建动态ID。假设我们有bulb0到bulbN-1的ID，我们可以通过一个简单的for循环来迭代它们：

// 假设有N个灯泡，ID从bulb0到bulb(N-1)
const NUM_BULBS = 3; // 定义灯泡总数

function turnOnScalable() {
    for (let i = 0; i < NUM_BULBS; i++) {
        document.getElementById(`bulb${i}`).src = 'pic_bulbon.gif';
    }
    console.log('所有灯已开启 (可扩展版)');
}

function turnOffScalable() {
    for (let i = 0; i < NUM_BULBS; i++) {
        document.getElementById(`bulb${i}`).src = 'pic_bulboff.gif';
    }
    console.log('所有灯已关闭 (可扩展版)');
}

在这个例子中，bulb${i} 会在每次循环中被解析为 bulb0, `