node节点之间的关系文档树和操作方法

最新推荐文章于 2022-04-10 10:53:30 发布

huruiDD

最新推荐文章于 2022-04-10 10:53:30 发布

阅读量164

点赞数

分类专栏： javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_38551805/article/details/115615902

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中DOM操作的关键方法，如appendChild(), insertBefore(), replaceChild(), removeChild(), 和 cloneNode()。通过实例演示了如何在文档树中添加、替换和删除节点，以及深浅复制的区别。

摘要由CSDN通过智能技术生成

一、关系文档树

二、节点操作方法

// appendChild()
let returnNode = someNode.appendChild(someNode.firstChild)

// insertBefore()
returnNode = someNode.insertBefore(newNode,null) //相当于appendChild()方法,作为最后一个子节点插入

returnNode = someNode.insertBefore(newNode,someNode.firstChild) //作为新的第一个节点进行插入

returnNode = someNode.insertBefore(newNode,someNode.lastChild) // 插入最后一个子节点前面

// appendChild() 和 insertBefort() 在插入节点的时候，不会删除任何已有节点

// replaceChild()
let returnNode = someNode.replaceChild(newNode,someNode.firstChild) // 替换第一个子节点
returnNode = someNode.replaceChild(nodeNode,someNode.lastChild) // 替换最后一个节点

// removeChild()
let returnNode = someNode.removeChild(someNode.firstChild) // 删除第一个子节点
returnNode = someNode.removeChild(someNode.lastChild) // 删除最后一个子节点

// replaceChild() 和removeChild() 一样，被移除的节点从技术上说仍然被同一个文档所拥有，但在文档中已经没有它的位置

// cloneNode()
//所有节点类型还共享了两个方法。第一个是cloneNode()，会返回与调用它的节点一模一样的节点。cloneNode()方法接收一个布尔值参数，表示是否深复制。在传入true 参数时，会进行深复制，即复制节点及其整个子DOM 树。如果传入false，则只会复制调用该方法的节点。复制返回的节点属于文档所有，但尚未指定父节点，所以可称为孤儿节点（orphan）。可以通过appendChild()、insertBefore()或replaceChild()方法把孤儿节点添加到文档中。
let deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); // 3（IE9 之前的版本）或7（其他浏览器）
let shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); // 0

在这个例子中，deepList 保存着myList 的副本。这意味着deepList 有3 个列表项，每个列表
项又各自包含文本。变量shallowList 则保存着myList 的浅副本， 因此没有子节点。
deepList.childNodes.length 的值会因IE8 及更低版本和其他浏览器对空格的处理方式而不同。IE9
之前的版本不会为空格创建节点。

//注意 cloneNode()方法不会复制添加到DOM 节点的JavaScript 属性，比如事件处理程序。这个方法只复制HTML 属性，以及可选地复制子节点。