DOM 操作
要知道一点,所有的 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>
说说感受,学的越多,越发现自己需要懂的越多。
学不动了。然而,还不是要学。