【中级】ul 翻转

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

1
2
3
4
5

function reverse(ul){
    // TODO
}

1
2
3

参考答案

function reverse(ul) {
    const len = ul.children.length;
    const fragment = document.createDocumentFragment();
    for (let i = len - 1; i >= 0; i--) {
        fragment.appendChild(ul.children[i]);
    }
    ul.appendChild(fragment);
}

1
2
3
4
5
6
7
8

children获取的是元素的所有子元素，而childNodes获取的是元素的所有子节点（包含注释、文本节点）
fragment
- fragment不会触发 DOM 树的重新渲染，不会导致性能问题
- fragment作为参数时，append（或insert）的是fragment的子节点，而不是fragment本身
- fragment的所有子节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作

# 【中级】ul 翻转

# 参考答案

【中级】ul 翻转

参考答案