javascript 节点排序实现代码_javascript技巧

php中文网

发布时间：2016-05-16 18:11:13

1581人浏览过

来源于php中文网

原创

在IE中我们可以利用sourceIndex，标准浏览器我们可以用compareDocumentPosition，但对于旧一点的标准浏览器呢？XML呢？因此我们就需要根据一个节点的属性确定它与另一个节点的关系了。
我的思路很简单，如果它们相同，返回0（用于去重），如果它们的父节点相同，那么根据nextSibling确定两者的先后顺序，否则就找到其最近公共祖先与其他两个最接近这祖先的两个父节点（人性点说，是伯父与父亲），这时不就是与父节点相同的情况吗？！根据nextSibling确定它们的顺序，它们的顺序就是它们的孩子的顺序（因此有一个叫李刚的爹很重要，在这个世袭制的世界上！）不过，有时最近公共祖先就是比较双方的某一个呢，那当然是它最近了。
剩下的问题就是求最近公共祖先的问题了。我的思路也很简单，不一定高效，毕竟大学把数学都荒废了。不断向上取得它们的父节点，直到最顶的HTML元素，连同最初那个节点，组成两个数组。然后每次取数组最后的元素进行比较，如果相同就去掉它们，因为相同的都是公共祖先，不相同就往上取其中一方就行了。
下面是测试页面与源码：
由于使用了window.console，因此建议在firefox，IE8，chrome下查看结果。

<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><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 class="aritcle_card flexRow">
							<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="/xiazai/code/10080" title="华锐行业电子商务系统"><img
										src="https://img.php.cn/upload/webcode/000/000/010/176076360662580.jpg" alt="华锐行业电子商务系统"></a>
								<div class="aritcle_card_info flexColumn">
									<a href="/xiazai/code/10080" title="华锐行业电子商务系统">华锐行业电子商务系统</a>
									<p>华锐行业电子商务系统2.0采用微软最新的.net3.5（c#）+mssql架构，代码进行全面重整及优化，清除冗余及垃圾代码，运行速度更快、郊率更高。全站生成静态、会员二级域名、竞价排名、企业会员有多套模板可供选择；在界面方面采用DIV+CSS进行设计，实现程序和界面分离，方便修改适合自己的个性界面，在用户体验方面，大量使用ajax技术，更加易用。程序特点:一、采用微软最新.net3.5+MSSQL</p>
								</div>
								<a href="/xiazai/code/10080" title="华锐行业电子商务系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
						</div></div> 
<div id="aa8"> 
<div id="aa9">888</div> 
<div id="aa10">999</div> 
</div> 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript如何进行代码调试_开发者工具有哪些技巧【教程】

javascript如何调试代码_有哪些开发者工具技巧【教程】

javascript算法如何优化_排序和搜索算法有哪些经典实现【教程】

如何清空并逐字显示文本：解决 textContent 累加而非替换的问题

Vue 单页应用中的多页面路由与布局管理指南

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：javascript提取内容到作为文章简介的代码_javascript技巧下一篇：禁止JS运行的代码_javascript技巧

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

Python 序列化

本专题整合了python序列化、反序列化相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own（AO3）官网入口展开，系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法，并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程，帮助用户稳定访问 AO3 官网，高效完成中文阅读与作品浏览。

2026.02.02

主流快递单号查询入口实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容，重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题，帮助用户快速获取最新物流状态，提升查件效率与使用体验。

2026.02.02

Golang WebAssembly（WASM）开发入门

本专题系统讲解 Golang 在 WebAssembly（WASM）开发中的实践方法，涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化，以及典型应用场景（如前端计算、跨平台模块）。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

2026.02.02