要知道一点，所有的 DOM 元素，都只能有一个父元素，它不能被两次插入到DOM 树中

如果我们把一个 DOM 节点插入到 document 的 a 位置，然后又把 DOM 节点插入到 document 的 b 位置，那么，它会默认把 a 位置的 DOM 节点 remove，再插入到 b 位置。

我们操作 DOM 的时候，是不需要把它从 DOM 树上面摘下来的，只要把它挂到另外一个地方，它会自动被摘下来，哪怕两棵树都不相关。

DOM 导航类操作

Node 版本(推荐根据 Node 来操作)

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling

Element 版本

• parentNode
• child
• firstElementChild
• lastElementChild
• nextElementSibling
• previousSibling

DOM 修改类操作

所有的修改类操作，都会实时改变child 的值

• appendChild 从后面插入
• insertBefore 从指定位置插入，有两个参数，一个是插入的元素，一个是插入的位置（有个问题就是，插入不到最后面，所以有了 appendChild）
• removeChild
• replaceChild

高级操作

尽量记住

• compareDocumentPosition 用于比较两个节点的关系

  用于比较先后

• contains 检查一个节点是否包含另外一个节点

• isEqualNode 检查两个节点是否完全相同

• isSameNode 检查两个节点是否是同一个节点，实际上在 javascript 中可以使用“===”

  这个就没啥用，用 javascript 就完事了

• cloneNode 复制一个节点，如果传入参数true，则会对该元素做深拷贝

eg

<div id="x">
  <div>1</div>
  <div>2</div>
</div>
<div id="b">
</div>

// 执行下面的这段代码，我们会发现，上面的 DOM 树里 x 的 <div>2</div>没了，到了 id="b"的 div 里
document.getElementById("b").appendChild(document.getElementById("x").children[1])

// children: HTMLCollection (div)
var children = document.getElementById(‘x‘).children[1];
// 执行下面这个
document.getElementById("b").appendChild(document.getElementById("x").children[1])
// 我们会发现，children 打印出来变成空的了
console.log(children)

最常见吃的亏

<div id="x">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<div id="b">
</div>

<script>
  var x = document.getElementById("x");
  var b = document.getElementById("b");
  for(var i = 0; i < x.children.length; i ++) {
		b.appendChild(x.children[i]);
	}
</script>

执行这段代码，我们会发现 DOM 树变成了这个样子。

原因呢？？？因为这是一个 living 的collection，我们把原来的第一个挪过去的时候，第一个就没了，实际上取第二个的时候取到的就是第三个。然后同理取到了第五个。

正确的写法

<div id="x">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<div id="b">
</div>

<script>
  var x = document.getElementById("x");
  var b = document.getElementById("b");
	while(x.children.length) {
    b.appendChild(x.children[1]);
  }
</script>

说说感受，学的越多，越发现自己需要懂的越多。

学不动了。然而，还不是要学。

DOM 操作

原文：https://www.cnblogs.com/ssaylo/p/13272988.html