首页 > 其他 > 详细

DOM 操作

时间:2020-07-09 13:10:44      阅读:56      评论:0      收藏:0      [点我收藏+]

要知道一点,所有的 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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!