如何使用JavaScript的OOP方法创建DOM节点？客户端待办列表实践问询

嘿，我来帮你搞定用OOP方法实现这个待办事项列表～咱们一步步来，把逻辑封装成类，既清晰又方便后续扩展功能。

第一步：调整HTML结构 #

首先咱们把内联的onclick去掉，换成更符合现代JS实践的事件监听，这样逻辑和结构能更好地分离：

<body>
  <button type="button" id="addItemBtn">Add New Item</button>
  <div id="todolist" class="todolistBody">
    <!-- 动态生成的待办项会插入到这里 -->
  </div>
</body>

第二步：创建TodoList类 #

咱们把所有和待办列表相关的逻辑都封装到TodoList类里，包括初始化元素、绑定事件、添加新项这些操作：

class TodoList {
  constructor() {
    // 获取DOM元素，把它们作为类的属性保存
    this.addBtn = document.getElementById('addItemBtn');
    this.todoContainer = document.getElementById('todolist');
    
    // 绑定点击事件，注意要绑定this指向，不然方法里的this会指向按钮元素
    this.addBtn.addEventListener('click', this.addNewItem.bind(this));
  }

  addNewItem() {
    // 创建待办项的DOM结构，这里我给你写个基础示例，你可以根据需求调整
    const todoItem = document.createElement('div');
    todoItem.className = 'todo-item';
    
    // 添加子元素：复选框、文本输入框、删除按钮
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    
    const textInput = document.createElement('input');
    textInput.type = 'text';
    textInput.placeholder = '输入待办内容...';
    
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.addEventListener('click', () => this.deleteItem(todoItem));
    
    // 把子元素添加到待办项容器里
    todoItem.appendChild(checkbox);
    todoItem.appendChild(textInput);
    todoItem.appendChild(deleteBtn);
    
    // 把新的待办项插入到页面的待办列表容器中
    this.todoContainer.appendChild(todoItem);
  }

  // 额外加个删除方法，方便后续扩展
  deleteItem(item) {
    this.todoContainer.removeChild(item);
  }
}

// 页面加载完成后初始化TodoList实例
document.addEventListener('DOMContentLoaded', () => {
  new TodoList();
});

为什么用OOP？ #

• 封装性：所有和待办列表相关的逻辑都集中在一个类里，以后找问题或者加功能（比如标记完成、本地存储）都很方便
• 可复用性：如果以后页面需要多个待办列表，直接new多个TodoList实例就行
• 可读性：类的方法名（比如addNewItem、deleteItem）一看就知道是干啥的，代码逻辑更清晰

你可以根据自己的需求修改addNewItem里的DOM结构，比如换成标签、调整样式类名之类的，完全没问题～

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