原生JS实现列表子元素顺序反转的方法分析


Posted in Javascript onJuly 02, 2018

本文实例讲述了原生JS实现列表子元素顺序反转的方法。分享给大家供大家参考,具体如下:

编写一个函数将一个列表里面的所有子元素顺序反转,问题不难但是解决的方法却有多种,而且性能大不一样,下面就介绍几种常用的方法:

1. 采用直接的DOM操作:

var ul = document.getElementById('target');
var list = ul.getElementByTagName('li');
var length = list.length;
while(length--){
  ul.appendchild(ul.childNodes[length]);
}

这种方法在子元素数量比较少的时候不会太影响页面性能,但是当子元素数量较大的时候,页面的性能会受到很大的影响,因为每一次插入元素都对页面进行直接的DOM操作,因此不太建议这种方法。

2. 采用文档碎片fragment方法

var ul = document.getElementById('target');
var list = ul.getElementByTagName('li');
var fragment = document.createDocumentFragment();
for(var i = list.length; i >= 0; i--){
  fragment.appendChild(list[i]);
}
ul.appendChile(fragment);

采用文档碎片的方法进行操作,整个插入过程只对fragment进行了一次的DOM操作,不管子元素的数量多少,相比第一种方法,页面性能会得到很大的提升,实际应用中可以采用这种方法。

关于fragment的官方说明文档https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment。

3. 采用数组的reverse方法

var ul = document.getElementById('target');
var chil_arr = Array.prototype.slice.call(ul.getElementByTagName('li'), 0);//因为getElementByTagName获取到的是伪数组,所以要进行转换
var str = '';
chil_arr.reverse();
for(var i = 0; i < chil_arr.length; i++){
  str += chil_arr[i].outerHTML;
}
ul.innerHTML(str);

这种方法性能也还好。

4. 采用innerHTML方法

var ul = document.getElementById('target');
var list = ul.getElementByTageName('li');
var str = "";
for(var i = list.length; i >= 0; i--){
  str += "<li>" + list[i].innerHTML + "</li>";
}
ul.innerHTML(str);

这种方法性能是最好的,建议在实际应用中采用这种方法,提高页面的性能。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取url参数值的两种方式
Sep 10 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
javascript闭包入门示例
Apr 30 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
VUE安装使用教程详解
Jun 03 Javascript
前端性能优化建议
Sep 17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
JS限制输入框输入的实现代码
Jul 02 #Javascript
webpack手动配置React开发环境的步骤
Jul 02 #Javascript
Angularjs中的$apply及优化使用详解
Jul 02 #Javascript
angularjs 的数据绑定实现原理
Jul 02 #Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 #Javascript
vue中的数据绑定原理的实现
Jul 02 #Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 #Javascript
You might like
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python中下划线的使用方法
2015/03/27 Python
Python中的index()方法使用教程
2015/05/18 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python使用knn实现特征向量分类
2018/12/26 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
毕业生自我鉴定
2013/11/05 职场文书
校长岗位职责
2013/11/26 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
网络舆情信息简报
2015/07/21 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
修改并编译golang源码的操作步骤
2021/07/25 Golang
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Python IO文件管理的具体使用
2022/03/20 Python