javascript 節(jié)點排序?qū)崿F(xiàn)代碼
更新時間：2011年01月31日 18:03:54 作者：
為了讓自定義選擇選擇出的節(jié)點集合盡可能接近原生API選出的結(jié)果，我們往往要對結(jié)果集進(jìn)行排序，此順序當(dāng)然是從上到下，從左到右的DOM樹順序。
在IE中我們可以利用sourceIndex，標(biāo)準(zhǔn)瀏覽器我們可以用compareDocumentPosition，但對于舊一點的標(biāo)準(zhǔn)瀏覽器呢？XML呢？因此我們就需要根據(jù)一個節(jié)點的屬性確定它與另一個節(jié)點的關(guān)系了。
我的思路很簡單，如果它們相同，返回0（用于去重），如果它們的父節(jié)點相同，那么根據(jù)nextSibling確定兩者的先后順序，否則就找到其最近公共祖先與其他兩個最接近這祖先的兩個父節(jié)點（人性點說，是伯父與父親），這時不就是與父節(jié)點相同的情況嗎？！根據(jù)nextSibling確定它們的順序，它們的順序就是它們的孩子的順序（因此有一個叫李剛的爹很重要，在這個世襲制的世界上?。┎贿^，有時最近公共祖先就是比較雙方的某一個呢，那當(dāng)然是它最近了。
剩下的問題就是求最近公共祖先的問題了。我的思路也很簡單，不一定高效，畢竟大學(xué)把數(shù)學(xué)都荒廢了。不斷向上取得它們的父節(jié)點，直到最頂?shù)腍TML元素，連同最初那個節(jié)點，組成兩個數(shù)組。然后每次取數(shù)組最后的元素進(jìn)行比較，如果相同就去掉它們，因為相同的都是公共祖先，不相同就往上取其中一方就行了。
下面是測試頁面與源碼：
由于使用了window.console，因此建議在firefox，IE8，chrome下查看結(jié)果。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我的思路很簡單，如果它們相同，返回0（用于去重），如果它們的父節(jié)點相同，那么根據(jù)nextSibling確定兩者的先后順序，否則就找到其最近公共祖先與其他兩個最接近這祖先的兩個父節(jié)點（人性點說，是伯父與父親），這時不就是與父節(jié)點相同的情況嗎？！根據(jù)nextSibling確定它們的順序，它們的順序就是它們的孩子的順序（因此有一個叫李剛的爹很重要，在這個世襲制的世界上?。┎贿^，有時最近公共祖先就是比較雙方的某一個呢，那當(dāng)然是它最近了。
剩下的問題就是求最近公共祖先的問題了。我的思路也很簡單，不一定高效，畢竟大學(xué)把數(shù)學(xué)都荒廢了。不斷向上取得它們的父節(jié)點，直到最頂?shù)腍TML元素，連同最初那個節(jié)點，組成兩個數(shù)組。然后每次取數(shù)組最后的元素進(jìn)行比較，如果相同就去掉它們，因為相同的都是公共祖先，不相同就往上取其中一方就行了。
下面是測試頁面與源碼：
由于使用了window.console，因此建議在firefox，IE8，chrome下查看結(jié)果。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JavaScript簡單實現(xiàn)的仿微博留言功能示例
這篇文章主要介紹了JavaScript簡單實現(xiàn)的仿微博留言功能,涉及javascript頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系
undefined==null引發(fā)的兩者區(qū)別與聯(lián)系2007-12-12
微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)功能的實例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)的實例代碼，通過截圖加實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了微信小程序之 catalog 切換實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
JS中new?Date().Format("yyyy-MM-dd")?報錯的解決
這篇文章主要介紹了JS中new?Date().Format("yyyy-MM-dd")?報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
JS+CSS實現(xiàn)可拖拽的漂亮圓角特效彈出層完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)可拖拽的漂亮圓角特效彈出層,以完整實例形式分析了彈出層特效及圓角矩形的實現(xiàn)技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家分享了KnockoutJs快速入門教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中，感興趣的小伙伴們可以參考一下2016-05-05
基于JavaScript實現(xiàn)瀑布流效果(循環(huán)漸近)
本文給大家介紹基于javascript實現(xiàn)循環(huán)漸近瀑布流效果，代碼簡單易懂，非常具有參考價值，需要的朋友參考下吧2016-01-01
TypeScript里string和String的區(qū)別
這篇文章主要介紹了TypeScript里string和String的區(qū)別，真的不止是大小寫的區(qū)別，string表示原生類型，而String表示對象，下文更多詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-03-03
微信小程序?qū)崿F(xiàn)單選、多選及如何通過變量控制單選/多選功能
文章介紹了如何在微信小程序中實現(xiàn)單選和多選功能,單選功能使用`radio`和`radio-group`組件,多選功能使用`checkbox`和`checkbox-group`組件,同時,還介紹了如何通過自定義邏輯實現(xiàn)單選和多選功能,并總結(jié)了每種功能的特點和實現(xiàn)方式2025-01-01