• 节点排序


    为了让自定义选择选择出的节点集合尽可能接近原生API选出的结果,我们往往要对结果集进行排序,此顺序当然是从上到下,从左到右的DOM树顺序。在IE中我们可以利用sourceIndex,标准浏览器我们可以用compareDocumentPosition,但对于旧一点的标准浏览器呢?XML呢?因此我们就需要根据一个节点的属性确定它与另一个节点的关系了。

    我的思路很简单,如果它们相同,返回0(用于去重),如果它们的父节点相同,那么根据nextSibling确定两者的先后顺序,否则就找到其最近公共祖先与其他两个最接近这祖先的两个父节点(人性点说,是伯父与父亲),这时不就是与父节点相同的情况吗?!根据nextSibling确定它们的顺序,它们的顺序就是它们的孩子的顺序(因此有一个叫李刚的爹很重要,在这个世袭制的世界上!)不过,有时最近公共祖先就是比较双方的某一个呢,那当然是它最近了。

    剩下的问题就是求最近公共祖先的问题了。我的思路也很简单,不一定高效,毕竟大学把数学都荒废了。不断向上取得它们的父节点,直到最顶的HTML元素,连同最初那个节点,组成两个数组。然后每次取数组最后的元素进行比较,如果相同就去掉它们,因为相同的都是公共祖先,不相同就往上取其中一方就行了。

    下面是测试页面与源码:

    
    <!doctype html>
    <html>
      <head>
        <title>节点排序 </title>
    
        <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>
      </head>
    
      <body>
        <form>
          <div id="aa1" >
            <div id="aa2">111</div>
            <div id="aa3">222<div>00</div></div>
            <div id="aa4">44<div id="aa5">111</div></div>
          </div>
          <div id="aa6">22</div>
          <div id="aa7"><p>Hello</p></div>
          <div id="aa8">
            <div id="aa9">888</div>
            <div id="aa10">999</div>
          </div>
        </form>
      </body>
    </html>
    

    由于使用了window.console,因此建议在firefox,IE8,chrome下查看结果。

  • 相关阅读:
    MySQL之IDE工具介绍及数据备份(数据库导入,导出)
    jmeter test Fragment
    python创建虚拟环境
    遇到的问题
    文件操作
    六、迭代器与生成器
    五、IO编程
    简单的例子
    四、函数
    三、集合与格式化
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1947286.html
Copyright © 2020-2023  润新知