前端练习29 循环调节列表

最新推荐文章于 2024-05-18 17:26:21 发布

「已注销」

最新推荐文章于 2024-05-18 17:26:21 发布

阅读量257

点赞数

分类专栏：前端练习

本文链接：https://blog.csdn.net/duola8789/article/details/85157864

版权

前端练习专栏收录该内容

53 篇文章 9 订阅

订阅专栏

知识点

DOM节点的获取、插入、删除
事件委托

题目

页面上有这么一个列表：

 <li>
    <span>1</span>
    <button class='up'>UP</button>
    <button class='down'>DOWN</button>
  </li>
  <li>
    <span>2</span>
    <button class='up'>UP</button>
    <button class='down'>DOWN</button>
  </li>
  <li>
    <span>3</span>
    <button class='up'>UP</button>
    <button class='down'>DOWN</button>
  </li>
  ...
</ul>

点击UP按钮会使得该li元素在列表中上升一个位置，点击DOWN按钮会使得该li元素下降一个位置。点击最后的元素的DOWN按钮会使得元素回到第一个位置，点击第一个元素的UP按钮会使其回到最后的位置。

页面上已经存在该列表，你只需要完成initAdjustableList()函数，给元素添加事件。

实现

现在这个时候，就不要用jQuery实现了，原生DOM操作一样可以实现。

用多了框架，直接操作DOM忘得差不多了，复习一下DOM的操作

添加DOM节点

parent.appendChild(child)，将child插入到parent的子节点列表的末尾，返回值是child

parentNode.replaceChild(newChild, oldChild)用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点，如果newChild存在于DOM树中，它会被从原始位置删除

parent.insertBefore(newNode, referenceNode)会将newNode插入到referenceNode的前面，如果newNode存在于DOM树中，它会被从原始位置删除，如果referenceNode不存在，那么新的节点将被插入到子节点的末尾。

这里我们可以使用insertBefore方法，通过不断调整referenceNode来实现节点的移动

删除DOM节点

childNode.remove()不接受参数，将其自己从所属的DOM树中删除

parent.removeChild(child)将child从parent中删除，返回被删除的节点

获取子节点序号

DOM对象是一个类数组对象，可以转换为数组使用indexOf方法找到子节点在父节点中的序号

[].indexOf.call(childrenLi, li)
// 或者
[...childrenLi].indexOf(li)

所以

const initAdjustableList = () => {
  const parent = document.querySelector('#adjustable-list');
  const childrenLi = parent.children;
  parent.addEventListener('click', (e) => {
    if (e.target.tagName.toLowerCase() === 'button') {
      const li = e.target.parentNode;
      const index = [...childrenLi].indexOf(li);
      console.log([].indexOf.call(childrenLi, li))
      let newIndex = 0;
      if (e.target.className === 'up') {
        newIndex = index - 1 < 0 ? childrenLi.length : index - 1
      } else {
        newIndex = index + 2 > childrenLi.length ? 0 : index + 2
      }
      parent.insertBefore(li, childrenLi[newIndex])
    }
  })
};