javascript节点(增加、删除、替换、合并、克隆)操作

一、javascript节点(增加、删除、替换、合并、克隆)操作

1、在JavaScript中，对节点的操作主要包括增加、删除、替换、合并、克隆等关键操作。以下是针对这些操作的详细解答：

2、增加元素：使用appendChild：在父元素的末尾添加子元素。执行parentNode.appendChild。使用insertBefore：在特定位置插入元素。执行parentNode.insertBefore，其中referenceElement是参照节点，新元素将插入到参照节点之前。

3、删除元素：使用removeChild：移除指定节点。执行parentElement.removeChild。

4、替换元素：使用replaceChild：以新元素替换旧元素。执行parentElement.replaceChild。

5、合并元素：使用normalize：移除空文本节点或合并相邻文本节点。执行parentNode.normalize。注意，这里的“合并”更多是指文本节点的合并，而不是元素的合并。

6、克隆元素：使用cloneNode：复制节点。执行originalNode.cloneNode，其中deep参数为true时表示深复制，为false时表示浅复制。

7、其他相关操作：创建文本内容：使用createTextNode生成文本节点。执行document.createTextNode。创建元素标签：使用createElement创建元素。执行document.createElement。插入文本到元素：使用appendChild将文本节点添加到元素。执行element.appendChild。分割元素：采用splitText将元素分割至特定位置。执行element.splitText，其中position是分割的位置。

8、性能提示：在项目中尽量减少直接操作DOM，以提升性能与可维护性。频繁操作DOM会导致页面重绘和重排，影响页面性能。因此，建议采用文档片段等方式批量处理DOM操作，然后再一次性将结果插入到页面中。

二、javaScript中table表任意复制一行怎么实现JS

1、table表任意复制一行的关键是复制哪行，插入到什么位置，如何插入。

2、第一个问题复制哪行，通常是点击某一行以确定复制的当前行，核心代码如下：

3、else if(e.srcElement) targ= e.srcElement

4、第二个问题插入位置，通常是点击行的下面

5、pos= targ.parentNode.rowIndex+1

6、第三个问题如何插入,先复制当前行：

7、var con= targ.parentNode.cloneNode(true);

8、再进行插入，可以是insertRow，也可以是insertAdjacentElement：

9、var x=document.getElementById('myTable').insertRow(pos)；

10、document.getElementById('myTable').insertAdjacentElement("beforeEnd",con);

11、复制之后可对复制行里的内容进行修改调整：

12、var y=x.insertCell(0).innerHTML=document.getElementById("cell1").value

13、document.getElementById('myTable').removeChild(Obj.parentNode.rows[i]);

三、怎样设置用Instantiate克隆出来的实例

1、第叁章 Prefabs(预设)与 Instantiate(实例化)

2、解释：Prefabs（预设）是一种资源类型，可被重复使用的游戏对象。它可以被置入多个场景中，又或者能够在一个场景中被多次置入。当你在一个场景中增加一个Prefabs，你就实例化了一个Prefabs。所有Prefabs实例都是Prefab的克隆，只要Prefabs原型发生改变，所有的Prefabs实例都会产生变化。

3、Prefabs的用法：如果大家要创建一些想要重复使用的东西，那么就该用到它了。

4、接下来我们写个小例子，看看如何使用它

5、1搭建如下场景：一个地板，一个下落的立方体，调整摄像机的角度和位置，加个平行光，位置参考下图的Scene窗口，效果如Game窗口展示的那样。同时给立方体加上刚体属性（Component-> Physics-> Rigidbody）

6、然后调整一下立方体的角度，运行一下，让它滚一下。

7、在Preject窗口，点Create-> Prefab。然后我们从Hierarchy窗口中将立方体拖到Project窗口新创建的Prefab上。当Hierarchy中的立方体变成了蓝色，Prefabs就完成了填充。

8、然后你从Preject窗口中将创建的Prefabs拖入Scene窗口中，运行一下。就完成了一次克隆。它们就像双胞胎一样。

9、3接着我们配合Instantiate，来用代码创建多个Prefabs的实例。

10、Instantiate：克隆原始物体。设置位置，角度。如果一个对象，组件，脚本实例被传入。将克隆整个对相爱难过的层次，以及所有子对象。

11、各位同学，让我们在Project窗口点Create-> Javascript创建一个脚本

12、我发现可以用as3的写法来写这里面的js，各位同学请看

13、public var Pre:GameObject;//在编辑器中用来绑定的Prefabs

14、private function Update():void

15、 var instance:GameObject=Instantiate(Pre,transform.position,transform.rotation);

16、//transform.position脚本绑定对象的位置就像this.transform….

17、//transform.rotation脚本绑定对象的角度就像this.transform….

18、4写完脚本，我们要把它绑定到一个对象上。这时候，我们可以删除Hierarchy窗口中的立方体，然后创建一个空的游戏对象（GameObject->Create Empty），放置到原来立方体的位置上。将脚本拖放到Hierarchy窗口中的新键的空对象上，让它来执行代码。

19、5在Hierarchy窗口中单击空对象，在它的Inspector窗口中就能看到绑定的脚本。然后我们把早前创建的Prefabs拖到脚本Pre右边的框上，完成了脚本中变量的绑定。

20、6按小三角运行一下，搞的像粒子效果一样，是不是很嗨？