对于一个已有的HTML结构:

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

javascript代码:

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

测试:

  1. // 测试:
  2. ;(function () {
  3. var
  4. arr, i,
  5. t = document.getElementById('test-list');
  6. if (t && t.children && t.children.length === 5) {
  7. arr = [];
  8. for (i=0; i<t.children.length; i++) {
  9. arr.push(t.children[i].innerText);
  10. }
  11. if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
  12. alert('测试通过!');
  13. }
  14. else {
  15. alert('测试失败: ' + arr.toString());
  16. }
  17. }
  18. else {
  19. alert('测试失败!');
  20. }
  21. })();

内容摘自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. 浅谈移动端三大viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

  2. LightOJ 1023 Discovering Permutations 水题

    http://www.lightoj.com/volume_showproblem.php?problem=1023 题意:26字母全排列 思路:用next_permutation或者思维想一下都可以 ...

  3. LightOJ 1319 - Monkey Tradition CRT除数互质版

    本题亦是非常裸的CRT. CRT的余数方程 那么定义 则 其中 为模mi的逆元. /** @Date : 2016-10-23-15.11 * @Author : Lweleth (SoungEarl ...

  4. 【设计模式】 模式PK:命令模式VS策略模式

    1.概述 命令模式和策略模式的类图确实很相似,只是命令模式多了一个接收者(Receiver)角色.它们虽然同为行为类模式,但是两者的区别还是很明显的.策略模式的意图是封装算法,它认为“算法”已经是一个 ...

  5. 鸽巢排序Pigeonhole sort

    原理类似桶排序,同样需要一个很大的鸽巢[桶排序里管这个叫桶,名字无所谓了] 鸽巢其实就是数组啦,数组的索引位置就表示值,该索引位置的值表示出现次数,如果全部为1次或0次那就是桶排序 例如 var pi ...

  6. wiki文档书写格式

    文档基本规范 标题 标题:标明需求的简短语句.或模块名称,目录是由标题生成,一份目录结构清晰的需求文档与标题的划分是密不可分. 正文 正文:有规范格式和生效标志的正式文本,正文包括 文字.表格.图片. ...

  7. 集合类HashMap,HashTable,ConcurrentHashMap区别?

    1.HashMap 简单来说,HashMap由数组+链表组成的,数组是HashMap的主体,链表则是主要为了解决哈希冲突而存在的,如果定位到的数组位置不含链表(当前entry的next指向null), ...

  8. 密码本(无bug版)

    main.cpp #include <stdio.h> #include <stdlib.h> #include "data.h" #include &qu ...

  9. Java的四种引用——强弱软虚

    1.强引用—用new 当我们用new向堆区申请一片内存空间时,此时就是强引用. 当内存不足,GC(垃圾收集器)不会回收该强引用的对象. 2.软引用—用SofeReference类实现 用来描述一些还有 ...

  10. 有向有权图的最短路径算法--Dijkstra算法

    Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Di ...