如何调整JS列表元素位置？插入排序操作HTMLCollection报错求助

核心问题 #

你遇到的错误根源在于document.getElementsByTagName('article')返回的不是普通数组，而是HTMLCollection——这是一个动态关联DOM的元素集合，它不支持直接通过索引赋值（比如A[j + 1] = A[j]这类操作），这就是控制台报错的直接原因。

解决步骤 #

1. 把HTMLCollection转为普通数组 #

只有将集合转换为普通数组后，才能正常执行排序中的索引赋值操作，常用转换方式有三种：

• 使用Array.from()：

  let posts = Array.from(document.getElementsByTagName('article'));
  

• 使用展开运算符...：

  let posts = [...document.getElementsByTagName('article')];
  

• 使用Array.prototype.slice.call()（兼容旧版浏览器）：

  let posts = Array.prototype.slice.call(document.getElementsByTagName('article'));
  

2. 优化排序逻辑（可选） #

你当前的排序逻辑每次比较都重复调用dayjs(...).format('YYYY-MM-DD')，可以提前提取日期值减少性能消耗：

function insertion_sort(A) {
    // 预处理每个元素的日期值，避免重复计算
    const itemsWithDate = A.map(item => ({
        element: item,
        date: dayjs(item.querySelector('span').innerText).format('YYYY-MM-DD')
    }));

    const len = itemsWithDate.length;
    let i = 1;
    while (i < len) {
        const x = itemsWithDate[i];
        let j = i - 1;
        while (j >= 0 && itemsWithDate[j].date > x.date) {
            itemsWithDate[j + 1] = itemsWithDate[j];
            j = j - 1;
        }
        itemsWithDate[j + 1] = x;
        i = i + 1;
    }

    // 提取排序后的DOM元素
    return itemsWithDate.map(item => item.element);
}

let posts = [...document.getElementsByTagName('article')];
const sortedPosts = insertion_sort(posts);
console.log(sortedPosts);

3. 更新页面DOM（如果需要） #

如果要让页面上的元素按排序后的顺序显示，需将排序后的元素重新插入DOM。假设所有article都在同一个父容器中：

const container = posts[0].parentNode;
// 清空容器避免重复元素
container.innerHTML = '';
// 逐个插入排序后的元素
sortedPosts.forEach(post => container.appendChild(post));

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