为了解决这个问题，我们需要摒弃依赖重复ID的错误做法，转而采用更精确的DOM操作技巧：

1. 不为动态生成的元素分配重复ID。
2. 利用事件触发时的上下文信息。 当一个按钮被点击时，该事件的上下文（即 this 关键字）会指向被点击的按钮本身。我们可以将这个 this 传递给事件处理函数。
3. 通过DOM遍历定位目标元素。 一旦我们获得了被点击的按钮元素，就可以利用DOM的父子关系（如 parentNode）来向上追溯，找到其对应的父级
4. 元素，进而修改其样式。

实现步骤与代码示例

下面我们将通过一个简单的待办事项列表示例，详细演示如何实现点击“完成”按钮后，切换对应列表项背景色的功能。

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

1. HTML 结构

首先，我们构建一个基本的HTML结构，包含一个输入框用于添加任务，一个按钮用于提交，以及一个无序列表

SoundRaw AI

面向创作者的 AI 音乐生成器，只需选择情绪、流派和长度，SoundRaw AI就能为你生成优美的歌曲。

下载

来显示待办事项。

  
  
  
  
  


  

    

      

        
Todo list
        

      

      

        
        add
        

          

          
        
      
    
  

  

2. JavaScript 核心逻辑

我们将把JavaScript代码直接嵌入到HTML文件的

const list = []; // 用于存储待办事项的数组

/**
 * 添加待办事项到列表
 */
function addItem() {
  const taskInput = document.getElementById('add');
  const task = taskInput.value.trim(); // 获取输入值并去除首尾空格

  if (task === '') {
    alert('待办事项不能为空！');
    return;
  }

  list.push(task); // 将任务添加到数组

  // 获取无序列表元素
  const unList = document.getElementById('unList');

  // 动态创建列表项，并为“完成”按钮绑定事件
  // 注意：不再给
设置重复ID
  unList.innerHTML += `
    

      ${task} 
      done
    
`;

  taskInput.value = ''; // 清空输入框
}

/**
 * 改变列表项的背景颜色
 * @param {HTMLElement} element 被点击的“完成”按钮元素
 */
function changeBackgroundColor(element) {
  // element 参数就是被点击的按钮（因为我们在onclick中传递了this）
  // element.parentNode 获取按钮的直接父元素，即对应的 

  element.parentNode.style.backgroundColor = 'green'; 
  // 也可以选择禁用按钮，表示已完成
  element.disabled = true; 
  element.textContent = 'Done!'; // 改变按钮文本
}

代码解析：

• addItem() 函数：
  • 获取输入框的值，并进行非空校验。
  • 使用模板字符串 (`) 动态生成
  • 元素及其内部的文本和“完成”按钮。
  • 关键在于 onclick='changeBackgroundColor(this)'：当这个“完成”按钮被点击时，它会调用 changeBackgroundColor 函数，并将 this（即当前被点击的按钮元素本身）作为参数传递过去。
• changeBackgroundColor(element) 函数：
  • 它接收一个参数 element，这个 element 就是从 onclick 事件中传递过来的被点击的按钮。
  • element.parentNode 是DOM操作中非常实用的一个属性，它返回指定元素的直接父元素。在这里，被点击的按钮的父元素就是我们想要改变背景色的
  • 元素。
  • 通过 element.parentNode.style.backgroundColor = 'green';，我们就可以精确地将对应
  • 元素的背景色设置为绿色。
  • 为了更好的用户体验，我们还禁用了按钮并修改了其文本。

完整示例代码

将上述HTML和JavaScript代码整合，您将得到一个功能完善的待办事项列表。

  
  
  
  
  
  


  

    

      

        
Todo list
        

      

      

        
        add
        

          

          
        
      
    
  

  

注意事项与最佳实践

1. ID的唯一性： 再次强调，id 属性在HTML文档中必须是唯一的。对于需要动态操作的元素，如果无法保证ID的唯一性，应避免使用 document.getElementById()。
2. DOM遍历的灵活性： 除了 parentNode，DOM还提供了 children、firstElementChild、lastElementChild、nextElementSibling、previousElementSibling 等属性，以及 closest()、querySelector() 等方法，可以帮助您在DOM树中灵活定位目标元素。
3. 事件委托 (Event Delegation)： 对于包含大量动态生成元素的列表，为每个元素单独绑定事件监听器可能会影响性能。更高效的做法是使用事件委托，即在父元素上绑定一个事件监听器，然后通过事件冒泡和 event.target 来判断是哪个子元素触发了事件。
4. 样式与行为分离： 直接通过 element.style.propertyName 修改样式虽然直接，但在大型项目中，推荐通过添加或移除CSS类名的方式来改变元素样式。例如，可以定义一个 .completed 类，包含绿色的背景色，然后在 changeBackgroundColor 函数中通过 element.parentNode.classList.add('completed') 来添加这个类。这有助于保持CSS和JavaScript代码的整洁和可维护性。

总结

本教程详细讲解了如何在JavaScript中实现动态待办事项列表的背景色切换功能。核心在于理解 id 属性的唯一性原则，并掌握如何利用 this 关键字和 parentNode 属性进行精确的DOM操作。通过避免ID重复和采用正确的元素定位策略，您可以有效地管理和操作动态生成的Web页面内容，从而构建出更健壮、更具交互性的用户界面。