如何编写DOM操作函数迁移todo-item元素并返回Promise

原代码存在的问题 #

• document.getElementsByTagName('todo-item')返回的是动态HTMLCollection，遍历过程中修改DOM会导致集合实时更新，出现元素遗漏的问题，需要先转换为静态数组处理。
• 没有遍历所有匹配的todo-item元素，原代码直接把集合整体当做单个元素操作，逻辑不成立。
• 移除元素的方法调用错误：todo-item元素不一定是body的直接子元素，不能直接调用document.body.removeChild移除，需要找到元素自身的父节点执行移除操作。
• 获取body节点的逻辑错误：document.getElementsByTagName('body')返回的是元素集合，实际可以直接通过document.body获取body节点；原代码中document.newDoc属于非法调用，newDoc是自定义变量，不属于document的属性。
• Promise触发resolve的时机错误：原代码重复执行append操作，且没有等待所有元素移动完成就触发resolve，不符合需求要求。

修正后符合需求的代码 #

function moveTodoItemsToBody() {
  return new Promise((resolve) => {
    // 将动态集合转为静态数组，避免DOM修改导致的集合变化问题
    const todoItemList = Array.from(document.getElementsByTagName('todo-item'));
    // 遍历处理所有todo-item元素
    todoItemList.forEach(item => {
      // appendChild会自动将元素从原父节点移除，无需手动调用remove
      document.body.appendChild(item);
    });
    // 所有元素添加完成后触发resolve，可按需返回处理后的元素列表
    resolve(todoItemList);
  });
}

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