如何用JavaScript将复选框下拉列表的标签文本替换为数组值？

现有HTML结构 #

<div id = "dropdown" class ="dropdown">
   <div class = "dropdown-row">
     <label for="Item-1">Item 1</label>
     <input type="checkbox" class="clickable" id="Item-1">
   </div>
   <div class = "dropdown-row">
     <label for="Item-2">Item 2</label>
     <input type="checkbox" class="clickable" id="Item-2">
   </div>
   <div class = "dropdown-row">
     <label for="Item-3">Item 3</label>
     <input type="checkbox" class="clickable" id="Item-3">
   </div>
   <div class = "dropdown-row">
     <label for="Item-4">Item 4</label>
     <input type="checkbox" class="clickable" id="Item-4">
   </div>
   <div class = "dropdown-row">
     <label for="Item-5">Item 5</label>
     <input type="checkbox" class="clickable" id="Item-5">
   </div>
   <div class = "dropdown-row">
     <label for="Item-6">Item 6</label>
     <input type="checkbox" class="clickable" id="Item-6">
   </div>
</div>

目标数组 #

const niches = ["Producer", "Filmmaker", "Manager", "Model", "Musican", "Artist"]

失败的尝试代码 #

const items = document.getElementsByTagName("label")
function setLabel () {
    for (let i = 0; i < niches.length; i++) {
        items.innerHTML = niches[i]
    }
}
setLabel()

问题分析 #

这段代码失效的核心原因：document.getElementsByTagName("label")返回的是HTMLCollection（类数组的元素集合），并非单个DOM元素，直接给items.innerHTML赋值没有意义，必须遍历集合内的每个label元素，逐个设置内容。

解决方案 #

方案1：for循环遍历类数组

直接通过索引遍历HTMLCollection，匹配数组对应值赋值：

const items = document.getElementsByTagName("label")
function setLabel () {
    // 同时限制数组和元素集合的长度，避免索引越界
    for (let i = 0; i < niches.length && i < items.length; i++) {
        items[i].innerHTML = niches[i]
    }
}
setLabel()

方案2：转数组后用forEach遍历

将HTMLCollection转为真正的数组，用forEach实现更简洁的遍历：

const items = Array.from(document.getElementsByTagName("label"))
function setLabel () {
    items.forEach((label, index) => {
        // 仅当数组存在对应索引值时赋值
        if (niches[index]) {
            label.textContent = niches[index]
        }
    })
}
setLabel()

这里推荐用textContent替代innerHTML，如果数组值包含特殊HTML字符，textContent会原样显示，避免潜在的XSS风险。

内容的提问来源于stack exchange，提问作者Andrew Ivanov