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)系了。
我的思路很簡(jiǎ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)然是它最近了。
剩下的問題就是求最近公共祖先的問題了。我的思路也很簡(jiǎn)單，不一定高效，畢竟大學(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ǎ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)然是它最近了。
剩下的問題就是求最近公共祖先的問題了。我的思路也很簡(jiǎn)單，不一定高效，畢竟大學(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í)行]
您可能感興趣的文章:
- jQuery:節(jié)點(diǎn)(插入,復(fù)制,替換,刪除)操作
- js獲取Treeview選中的節(jié)點(diǎn)(C#選中CheckBox項(xiàng))
- Javascript的各種節(jié)點(diǎn)操作實(shí)例演示代碼
- javascript學(xué)習(xí)筆記(十九) 節(jié)點(diǎn)的操作實(shí)現(xiàn)代碼
- 初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
- javascript 節(jié)點(diǎn)排序 2
- javascript 變態(tài)的節(jié)點(diǎn)集合
- javascript中節(jié)點(diǎn)的最近的相關(guān)節(jié)點(diǎn)訪問方法
相關(guān)文章
這篇文章主要介紹了js關(guān)于命名空間的函數(shù),實(shí)例講述了namespace函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
使用Javascript簡(jiǎn)單實(shí)現(xiàn)圖片無縫滾動(dòng)
本文簡(jiǎn)單介紹了使用原生javascript實(shí)現(xiàn)簡(jiǎn)單的圖片無縫滾動(dòng)的方法，并附上示例代碼，推薦給大家，直接可以用在項(xiàng)目中的。2014-12-12
這篇文章主要為大家詳細(xì)介紹了js編寫簡(jiǎn)易的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡(jiǎn)單常見HTML5 Canvas特效濾鏡，并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js，程序源代碼如下，感興趣的朋友可以參考下哈2013-06-06
什么是cookie?js手動(dòng)創(chuàng)建和存儲(chǔ)cookie
cookie 是存儲(chǔ)于訪問者的計(jì)算機(jī)中的變量，在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)訪問者名字的 cookie,需要的朋友可以參考下2014-05-05
基于Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法
不知道大家有沒有發(fā)現(xiàn)在現(xiàn)在的移動(dòng)頁面上，有很多情況需要加載大量的資源。但是移動(dòng)端的訪問速度和pc還是有很大的差距，有些時(shí)候需要一些取巧的方式來提升用戶體驗(yàn)，而實(shí)時(shí)顯示加載進(jìn)度就是其中一種。這篇文章就給大家分享了Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法。2016-10-10
學(xué)習(xí)JavaScript設(shè)計(jì)模式(多態(tài))
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹多態(tài)，舉例說明多態(tài)的思想，對(duì)多態(tài)進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了JavaScript中獲取時(shí)間的函數(shù)集，通過實(shí)例代碼給大家講解，非常詳細(xì)，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
javascript中數(shù)組和字符串的方法對(duì)比
下面小編就為大家?guī)硪黄猨avascript中數(shù)組和字符串的方法對(duì)比。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法詳解
在微信小程序開發(fā)時(shí)，它的image標(biāo)簽有一個(gè)默認(rèn)高度，這樣你的圖片很可能出現(xiàn)被壓縮變形的情況，所以就需要獲取到圖片的原始尺寸對(duì)image的寬高設(shè)置，本文就來分享一下JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法吧2023-03-03