IE에서는 sourceIndex를 사용할 수 있고 표준 브라우저에서는 CompareDocumentPosition을 사용할 수 있지만 이전 표준 브라우저는 어떻습니까? XML은 어떻습니까? 그러므로 우리는 그 속성을 기반으로 노드와 다른 노드 사이의 관계를 결정해야 합니다.
내 생각은 매우 간단합니다. 두 노드가 동일하면 0을 반환합니다(중복 제거를 위해). 상위 노드가 동일하면 nextSibling을 기준으로 두 노드의 순서를 결정합니다. 다른 두 개는 이 조상과 가장 가까운 두 개의 부모 노드(인간의 관점에서 보면 삼촌과 아버지)가 부모 노드와 같은 상황이 아닌가? ! 그들의 순서는 nextSibling을 기준으로 결정되며, 그들의 순서는 자녀의 순서입니다(그러므로 이 세습세계에서는 리강이라는 아버지가 있다는 것이 매우 중요합니다!). 그러나 때로는 가장 최근의 공통조상이 둘 중 하나일 때도 있습니다. 파티, 그것은 확실히 최근의 일입니다.
남은 문제는 가장 최근의 공통조상을 찾는 것이다. 내 생각은 또한 매우 단순하지만 반드시 효율적이지는 않습니다. 결국 대학에서 수학은 버려졌습니다. 원래 노드와 함께 최상위 HTML 요소가 두 개의 배열을 형성할 때까지 상위 노드를 계속 위로 가져옵니다. 그런 다음 비교를 위해 매번 배열의 마지막 요소를 가져옵니다. 동일한 요소는 공통 조상이므로 제거합니다.
테스트 페이지 및 소스코드는 다음과 같습니다.
window.console을 사용하므로 결과는 Firefox, IE8, Chrome에서 보시는 것을 권장합니다.
]<script>
window.onload = function(){
function shuffle(a) {
var array = a.concat();
var i = array.length;
while (i) {
var j = Math.floor(Math.random()*i);
var t = array[--i];
array[i] = array[j];
array[j] = t;
}
return array;
}
var log =function(s){
window.console && window.console.log(s)
}
var sliceNodes = function(arr){
var ret = [], i = arr.length;
while (i) ret[--i] = arr[i];
return ret;
}
var sortNodes = function(a,b){
var p = "parentNode",ap = a[p],bp = b[p];
if(a === b){
return 0
}else if(ap === bp){//如果父节点相同
while(a = a.nextSibling){//比较这两兄弟
if(a === b){
return -1
}
}
return 1
}else if(!ap){
return -1
}else if(!bp){
return 1
}
var al = [], ap = a
while(ap && ap.nodeType === 1){
al[al.length] = ap
ap = ap[p]
}
var bl = [],bp = b;
while(bp && bp.nodeType === 1){
bl[bl.length] = bp
bp = bp[p]
}
ap = al.pop();
bp = bl.pop();
while(ap === bp){//去掉所有公共祖先
ap = al.pop();
bp = bl.pop();
}
if(ap && bp){//比较伯父与父亲
while(ap = ap.nextSibling){
if(ap === bp){
return -1
}
}
return 1
}
//如果是最近公共祖先与某一方进行比较
return ap ? 1 : -1
}
var els = document.getElementsByTagName("div")
els = sliceNodes(els);//转换成纯数组
log(els);
els = shuffle(els);//洗牌（模似用自定义的选择器取得的节点集合情况）
log(els);
els = els.sort(sortNodes)
log(els)
}
</script>
