快捷導(dǎo)航

javascript 節(jié)點(diǎn)排序?qū)崿F(xiàn)代碼

更新時(shí)間：2011年01月31日 18:03:54 作者：

為了讓自定義選擇選擇出的節(jié)點(diǎn)集合盡可能接近原生API選出的結(jié)果，我們往往要對(duì)結(jié)果集進(jìn)行排序，此順序當(dāng)然是從上到下，從左到右的DOM樹順序。

在IE中我們可以利用sourceIndex，標(biāo)準(zhǔn)瀏覽器我們可以用compareDocumentPosition，但對(duì)于舊一點(diǎn)的標(biāo)準(zhǔn)瀏覽器呢？XML呢？因此我們就需要根據(jù)一個(gè)節(jié)點(diǎn)的屬性確定它與另一個(gè)節(jié)點(diǎn)的關(guān)系了。
我的思路很簡單，如果它們相同，返回0（用于去重），如果它們的父節(jié)點(diǎn)相同，那么根據(jù)nextSibling確定兩者的先后順序，否則就找到其最近公共祖先與其他兩個(gè)最接近這祖先的兩個(gè)父節(jié)點(diǎn)（人性點(diǎn)說，是伯父與父親），這時(shí)不就是與父節(jié)點(diǎn)相同的情況嗎？！根據(jù)nextSibling確定它們的順序，它們的順序就是它們的孩子的順序（因此有一個(gè)叫李剛的爹很重要，在這個(gè)世襲制的世界上?。┎贿^，有時(shí)最近公共祖先就是比較雙方的某一個(gè)呢，那當(dāng)然是它最近了。
剩下的問題就是求最近公共祖先的問題了。我的思路也很簡單，不一定高效，畢竟大學(xué)把數(shù)學(xué)都荒廢了。不斷向上取得它們的父節(jié)點(diǎn)，直到最頂?shù)腍TML元素，連同最初那個(gè)節(jié)點(diǎn)，組成兩個(gè)數(shù)組。然后每次取數(shù)組最后的元素進(jìn)行比較，如果相同就去掉它們，因?yàn)橄嗤亩际枪沧嫦?，不相同就往上取其中一方就行了?
下面是測(cè)試頁面與源碼：
由于使用了window.console，因此建議在firefox，IE8，chrome下查看結(jié)果。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

節(jié)點(diǎn)排序

相關(guān)文章

JavaScript簡單實(shí)現(xiàn)的仿微博留言功能示例
這篇文章主要介紹了JavaScript簡單實(shí)現(xiàn)的仿微博留言功能,涉及javascript頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(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ā)功能的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)限制用戶轉(zhuǎn)發(fā)的實(shí)例代碼，通過截圖加實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
微信小程序之 catalog 切換實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序之 catalog 切換實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JS中new?Date().Format("yyyy-MM-dd")?報(bào)錯(cuò)的解決
這篇文章主要介紹了JS中new?Date().Format("yyyy-MM-dd")?報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
JS+CSS實(shí)現(xiàn)可拖拽的漂亮圓角特效彈出層完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)可拖拽的漂亮圓角特效彈出層,以完整實(shí)例形式分析了彈出層特效及圓角矩形的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-02-02
KnockoutJs快速入門教程
這篇文章主要為大家分享了KnockoutJs快速入門教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中，感興趣的小伙伴們可以參考一下
2016-05-05
基于JavaScript實(shí)現(xiàn)瀑布流效果(循環(huán)漸近)
本文給大家介紹基于javascript實(shí)現(xiàn)循環(huán)漸近瀑布流效果，代碼簡單易懂，非常具有參考價(jià)值，需要的朋友參考下吧
2016-01-01
TypeScript里string和String的區(qū)別
這篇文章主要介紹了TypeScript里string和String的區(qū)別，真的不止是大小寫的區(qū)別，string表示原生類型，而String表示對(duì)象，下文更多詳細(xì)內(nèi)容需要的小伙伴可以參考一下
2022-03-03
微信小程序?qū)崿F(xiàn)單選、多選及如何通過變量控制單選/多選功能
文章介紹了如何在微信小程序中實(shí)現(xiàn)單選和多選功能,單選功能使用`radio`和`radio-group`組件,多選功能使用`checkbox`和`checkbox-group`組件,同時(shí),還介紹了如何通過自定義邏輯實(shí)現(xiàn)單選和多選功能,并總結(jié)了每種功能的特點(diǎn)和實(shí)現(xiàn)方式
2025-01-01