在 JavaScript 中按文档顺序对元素进行排序

Question

我有一个

Element

数组，我希望它们按文档顺序排列。我知道这在 XPath 中实现起来很简单，但是对于单个表达式来说，我必须实现的逻辑有点复杂。

我确实找到了

Node.compareDocumentPosition()

，但它生成了相当多组合的位掩码，因此对于比较器来说不是很理想。

作为我最后的手段，我可能可以向数组中的所有元素添加一个随机属性，并使用 XPath 再次选择它们，但如果可能的话，我宁愿不这样做。

Answer 1

我不一定同意

document.compareDocumentPosition()

对于比较器来说是不够的。为什么你认为这不理想？

var elementArray = [];

elementArray.push(document.getElementById('div3'));
elementArray.push(document.getElementById('div2'));
elementArray.push(document.getElementById('div4'));
elementArray.push(document.getElementById('div1'));

function documentPositionComparator (a, b) {
  if (a === b) {
    return 0;
  }

  var position = a.compareDocumentPosition(b);

  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
    return -1;
  } else if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
    return 1;
  } else {
    return 0;
  }

}

console.log('unsorted::', elementArray);
console.log('sorted::', elementArray.sort(documentPositionComparator));

<div id="div1">Div 1
  <div id="div2">Div 2
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>
  </div>
</div>

Answer 2

假设元素具有唯一标识符，

querySelectorAll

按文档顺序返回结果。

function findInDomOrder(elements) {
    const selector = elements.map(x => '#' + x.id).join(',')
    return document.querySelectorAll(selector)
}

const elements = [
    document.getElementById('d3'),
    document.getElementById('d2'),
    document.getElementById('d4'),
    document.getElementById('d1'),
]

console.log(findInDomOrder(elements))

// [Log] NodeList (4)
// 0 
// <div id="d1"></div>
// 1 
// <div id="d2"></div>
// 2 
// <div id="d3"></div>
// 3
// <div id="d4"></div>