Flex容器通过order调整显示顺序后如何获取与显示一致的子元素列表

没有原生DOM API可以直接返回按Flex order属性渲染顺序排序的子元素列表，children、childNodes等属性永远按DOM结构的原始顺序返回节点。

你可以用几行代码手动实现排序，性能开销几乎可以忽略，完全不会影响你滚动器的响应速度：

// 替换成你自己的内层Flex容器选择器
const flexContainer = document.querySelector('.inner-scroll-container')
// 按实际渲染顺序排序子元素
const sortedChildren = Array.from(flexContainer.children).sort((a, b) => {
  // 取计算后的order值，兼容行内样式和CSS样式表设置的order
  const orderA = Number(getComputedStyle(a).order) || 0
  const orderB = Number(getComputedStyle(b).order) || 0
  return orderA - orderB
})

// 取最左侧显示的第一个元素加类名
sortedChildren[0].classList.add('left-first-item')

如果你的order值都是直接设置在元素的行内style属性上，可以进一步简化排序逻辑，不用调用getComputedStyle：

const sortedChildren = Array.from(flexContainer.children).sort((a, b) => {
  return (Number(a.style.order) || 0) - (Number(b.style.order) || 0)
})

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