Question

我需要编写一个函数（例如permuteChildren()）

验证父对象是类型Element的DOM节点。如果不是，则返回false来放弃。
从任何非Element类型的直接子代中清除父代。
随机排列父级的直接子级元素。

完成这项工作后，该函数将返回true。

我只需要使用Pure DOM（无框架）编写代码，而无需HTML文本（例如innerHTML）操纵。

这是一个例子：

<ul>
    <li>Apple
        <ul>
            <li>Golden</li>
            <li>Lady</li>
        </ul>
    </li>
    <li>Pear</li>
    <li>Strawberry</li>
    <li>Lemon</li>
</ul>

在调用permuteChildren(<the root UL node>)之后，结构将变为：

<ul>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Lemon</li>
    <li>Apple
    <ul>
        <li>Golden</li>
        <li>Lady</li>
    </ul>
    </li>
</ul>

Answer 1

在这里-代码简单且不言自明，但是如果您需要进一步的说明，请在注释中打扰我：

const permuteChildren = parent => {
  
  // Verifies that the parent is a DOM node of type Element
  if (!(parent instanceof Element)) return false;
  
  // Cleans parent from any direct child that is not of type Element
  for (let child of parent.children) {
    if (!(child instanceof Element)) {
      child.remove();
    }
  }
  
  // Randomly permutes parent's direct child elements
  let children = [...parent.children];
  Array.from(parent.children).forEach(child => child.remove());
  while (children.length!=0) {
    let randomIndex = Math.floor(Math.random()*children.length);
    parent.appendChild(
      children.splice(randomIndex, 1)[0]
    )
  }
  
}

permuteChildren(document.querySelector('ul'));

<ul>
    <li>Apple
        <ul>
            <li>Golden</li>
            <li>Lady</li>
        </ul>
    </li>
    <li>Pear</li>
    <li>Strawberry</li>
    <li>Lemon</li>
</ul>

验证列表的父级是“元素”类型的DOM节点

1 个答案: