原生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移除数组元素减少长度的方法
Sep 05 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue动态改变背景图片demo分享
Sep 13 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
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
Protoss兵种对照表
2020/03/14 星际争霸
PHP开发入门教程之面向对象
2006/12/05 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python 26进制计算实现方法
2015/05/28 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python调用外部程序的实操步骤
2019/03/04 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
卖车协议书范例
2014/09/16 职场文书
施工安全保证书
2015/05/09 职场文书
春晚观后感
2015/06/11 职场文书
卖车协议书范文
2016/03/23 职场文书
MySQL 开窗函数
2022/02/15 MySQL
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP