微信标志

JAVAscript练习

东山群-电脑网络技术
例1、移动li 从黄色区域移动到红色区域

例2、appendChild到ul1里

例3、排序

记录

移动Li:首先找出要移动的Li是谁,其实就是Ul1的第一个子节点。例如:var oLi1=oUl1[0].children[0];。首先需要把这个子节点从Ul1里移除掉,例如:oUl1[0].removeChild(oLi1);。然后再把它添加到Ul2里,例如:oUl2.appendChild(oLi1);

关于appendChild:其实appendChild做了两件事,1、先把元素从原有的父级上删掉。2、添加到新的父级。所以可以不需要在原有的父级上removeChild,而是直接在新的父级上直接appendChild就可以了。

例2appendChild到Ul1里:其实这个子节点本身就是Ul1里的,而现在又添加了一遍。结果就是Li1跑到最下边去了。它的原理就是先把1给删掉,同时2就会往上顶,然后又把1添加到最后边。

排序原理:首先从所有li里找到最小的那一个。把最小的那一个appendChild加到最后,持续寻找最小的,持续添加到最后。

元素集合:var aLi=oUl3[0].getElementsByTagName('li');。实际上这个aLi并不是一个数组,至少他不是一个Array。aLi它叫做元素集合,就是把一大堆的元素给放到一起,跟数组差不多。只不过是元素集合也有length,也可以用方括号。所以sort之类的对于元素集合来说就不好使了。

排序-元素集合转成数组:既然aLi不是一个数组,那就建立一个空数组,做一个循环,循环所有li的length。每循环一次就把这个li里的值就添加到数组里去。这个时候数组就有了一堆的li了,然后对这个数组进行sort排序。在做sort排序的时候需要一个比较函数,它有两个参数,这两个参数就是要比较的东西,也就是li1和li2的innerHTML的大小。接下来按照数组的顺序给ul重新循环appendChild一遍所有li。