对于一个已有的HTML结构:

  1. Haskell
  2. JavaScript
  3. Python
  4. Ruby
  5. Scheme
<!-- HTML结构 -->
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>

javascript代码:

var list = document.getElementById('test-list')
var slist = list.children;
console.log(slist);
slist = Array.prototype.slice.call(slist).sort(function(a, b){
return a.innerHTML > b.innerHTML ? 1 : -1 ;
})
slist.forEach(function(el){
list.appendChild(el);
})

测试:

// 测试:
;(function () {
var
arr, i,
t = document.getElementById('test-list');
if (t && t.children && t.children.length === 5) {
arr = [];
for (i=0; i<t.children.length; i++) {
arr.push(t.children[i].innerText);
}
if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
alert('测试通过!');
}
else {
alert('测试失败: ' + arr.toString());
}
}
else {
alert('测试失败!');
}
})();

内容摘自https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014359940861047248456754f44e55919fe9370c723ae6000#0

将字符串顺序重新排序DOM节点的更多相关文章

  1. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  2. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  3. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  4. js学习总结:DOM节点二(dom基本操作)

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  5. DOM 节点node

    DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构,即在HTML中所有内容都是节点.文档节点是每个文档的根节点,文档节点有一个子节点,称为文档元素.每个文档只能有一个文档元素.在HTM ...

  6. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  7. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  8. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  9. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

随机推荐

  1. Ubuntu修改系统语言为英文可支持中文

    简单来说,就行修改/etc/default/locale文件,设置语言位UTF-8,如果没有这个语言,就执行命令locale-gen en_US.UTF-8进行安装,没有即时生效的话就重启. 查看当前 ...

  2. 数据结构:K-D树

    K-D树实际上是一棵高维二叉搜索树,与普通二叉搜索树不同的是,树中存储的是一些K维数据 普通的二叉搜索树是一维的,当推广到K维后,就是我们的K-D树了 在K-D树中跟二叉搜索树差不多,也是将一个K维的 ...

  3. [Luogu 2221] HAOI2012 高速公路

    [Luogu 2221] HAOI2012 高速公路 比较容易看出的线段树题目. 由于等概率,期望便转化为 子集元素和/子集个数. 每一段l..r中,子集元素和为: \(\sum w_{i}(i-l+ ...

  4. Struts2.X深入浅出 学习笔记

    第一节.MVC以及Struts2简介 第二节.Action生命周期以及接收表单数据 第三节.Struts2配置以及Struts.xml详解 Struts2 主要配置文件 Web.xml 设置过滤器以及 ...

  5. bzoj1862/1056: [Zjoi2006]GameZ游戏排名系统

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1862 http://www.lydsy.com/JudgeOnline/problem.ph ...

  6. Fermat2018游记

    day (-22) 2018年2月5日 Devin大佬给我发了一份Waterloo AIF的原件截图,发现里面居然直接问你的Fermat分数,那么这么重要的考试当然不能错过啊 若干天之后刚开学不久的一 ...

  7. centos7系统安装配置

    下载centos7 iso镜像 电脑里面本来有ubuntu系统,直接在u盘做好启动盘安装即可,选择手动分区(忘了),将原本ubuntu系统分区压缩200G.系统不要选择最小化,选择gnome的图形界面 ...

  8. Linux 入门记录:九、Linux 文件系统挂载管理

    一.挂载操作 磁盘或分区创建好文件系统后,需要挂载到一个目录才能够使用. Windows 或 Mac 系统会进行自动挂载,一旦创建好文件系统后会自动挂载到系统上,Windows 上称之为 C 盘.D ...

  9. win7旗舰版64位缺失tbb.dll文件

    win7旗舰版64位缺失tbb.dll文件 https://zhidao.baidu.com/question/688589990330312804.html 到好的电脑中复制一个,黏贴到下同的路径下 ...

  10. iOS WKWebView ios9以上版本配置 与 设置UserAgent(用户代理), 解决点击web, 客户端接收不到web事件问题

    项目运行在ios9上需要在info.plist文件中配置加入如下信息, App Transport Security Settings Allow Arbitrary Loads = YES < ...