DOM 操作 2

题目

从一道面试题说起，给定下面的 html，如何把该 html 中 DOM 的 Children 逆序。

<div id="a">
  <span>1</span>
  <p>2</p>
  <a>3</a>
  <div>4</div>
</div>

解答一

该方法比较原始笨重，但是可以实现功能。思路大概就是获取 children，然后把 children 保存成数组，同时把 children 从 DOM 树中删除，对数组逆序以后，再挂载到原来的 DOM 树里面。

非常中规中矩的一种写法，这种写法非常的稳妥。

但是看到这种答案，基本就是不懂 DOM树的操作。

<script>
  let element = document.getElementById('a');
  function reverseChildren() {
    let children = Array.prototype.slice.call(element.childNodes);
    for(let child of children) {
      element.removeChild(child);
    }
    // element.innerHTML = '';
    children.reverse();
    for(let child of children) {
      element.appendChild(child);
    }
  }
  reverseChildren();
</script>

解答二

熟悉 DOM 操作的，知道我们对原来的 children 的 child 进行 append 操作时候，child 会自动从 html 的 dom 树中剖离，所以：

<script>
  let element = document.getElementById("a");
  function reverseChildren() {
    let l = element.childNodes.length;
    while(l-- > 0) {
      // 始终找最后一个元素
      element.appendChild(element.childNodes[l]);
    }
  }
  reverseChildren();
</script>

解答三 （两分的答案）

使用 range

<script>
  let element = document.getElementById("a");
  function reverseChildren() {
    let range = new Range();
    range.selectNodeContents(element);
    // extractContents可以一下子把所有的子元素都摘下来
    let fragment = range.extractContents();
    var l = fragment.childNodes.length;
    while (l-- > 0) {
      fragment.appendChild(fragment.childNodes[l]);
    }
    element.appendChild(fragment);
  }
  reverseChildren();
</script>