原生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 相关文章推荐
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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数组(array)输出的三种形式详解
2013/06/05 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
vue-router单页面路由
2017/06/17 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python 使用type来定义类的实现
2019/11/19 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
自查自纠整改报告
2014/11/06 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android