DOM 节点的唯一性

鉴于“任何 DOM 节点不能同时出现在文档中的多个位置上”，有时想频繁操作一段节点时会把整段节点缓存下来，如果缓存用的类似于 document.querySelectorAll() 这样的方法的话，缓存下来的节点和 DOM 中的节点指针还是一样的。

// DOM 操作之前
<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

// DOM 操作
const ul = document.querySelector('ul')
const firstLi = ul.querySelectorAll('li')[0]
ul.appendChild(firstLi)

// DOM 操作之后
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>0</li>
</ul>

使用 DOM 操作 appendChild() 把节点插入到父节点末尾的时候，节点的位置发生了变化，从前面移动到了最后。但现实中往往只想纯粹的添加一个元素而不是改变指针，这时候就可以用到 cloneNode() 方法，用来创建节点完全相同的副本，这个副本脱离了原来的节点指针，两者互不影响。cloneNode() 接收一个布尔值的参数，true 表示复制这个节点和它的整个子节点，false 表示只复制这个节点本身。

// DOM 操作之前
<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

// DOM 操作
const ul = document.querySelector('ul')
const firstLi = ul.querySelectorAll('li')[0]
const deepFirstLi = firstLi.cloneNode(true)
ul.appendChild(deepFirstLi)

// DOM 操作之后
<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>0</li>
</ul>