一:表格排序:

<ul>

<li> 98 </li>

<li> 65 </li>

<li> 99 </li>

<li> 90 </li>

<li> 87 </li>

</ul>

使列表按照li内容从小到大进行排序:

1、编写把类数组(arguments、nodeList(节点集合)、htmlDocument(元素集合))转化为数组的方法:

在此方法中使用try-catch的方式解决浏览器兼容的问题

JS中的表格排序和关于DOM映射机制

2、表格排序的几个步骤:

     2.1 先把元素集合类数组转变为数组(因为数组才能使用sort的的排序方法)

     2.2  给转化后获得的数组ary进行排序

    2.3  按照ary中存储的最新顺序依次把对应的li添加到页面中

JS中的表格排序和关于DOM映射机制

JS中的表格排序和关于DOM映射机制

二:dom映射机制:

疑问:使用appendChild(frg)应该是在原有的li下面添加排序后的li,那么原有的li有5个,排序后的li有5个,那么最后页面用该存在着10个li,为什么只有排序后的5个li呢?

解答:这就跟dom的映射机制有关了,什么是dom的映射机制呢?

JS中的表格排序和关于DOM映射机制

JS中的表格排序和关于DOM映射机制

因为排序后的li和页面存在的li是绑定的,重新插入排序后的li,只是把原有的li在原来的位置进行移动。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-06-19
  • 2021-08-21
  • 2022-02-12
  • 2021-05-21
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-11-23
  • 2021-07-30
  • 2022-12-23
  • 2022-12-23
  • 2021-12-04
相关资源
相似解决方案