JS操作DOM節點大全

1.Javascript删除節點

在Javascript中，隻提供了一種删除節點的方法：removeChild()。

removeChild() 方法用來删除父節點的一個子節點。

文法：parent.removeChild(thisNode)

例子1

var list=document.getElementById("myList");

list.removeChild(list.childNodes[0]);

例子2

var thisNode=document.getElementById("demo");

thisNode.parentNode.removeNode(thisNode);

2.Javascript建立節點

createElement()用來建立一個元素節點，即 nodeType=1 的節點。

文法：document.createElement(tagName)

其中，tagName 為HTML标簽的名稱，并将傳回一個節點對象。

例如，建立<div>标簽和<p>标簽的語句如下：

var ele_div=document.createElement("div");

var ele_p=document.createElement("p");

3.JavaScript：擷取父節點

擷取已知節點的父節點請使用 parentNode 。

文法：nodeObject.parentNode

其中，nodeObject 為節點對象（元素節點）。

例如，擷取 id="demo"的節點的父節點：

document.getElementById("demo").parentNode;

4.Javascript插入節點

JavaScript insertBefore()：插入子節點

insertBefore() 方法的作用是：在現有的子節點前插入一個新的子節點

文法：parentNode.insertBefore(newItem,existingItem);

newItem為待插入的節點，existingItem為已存在的節點

例如：移動某個清單項到另一個清單項：

var node=document.getElementById("myList2").lastChild;

var list=document.getElementById("myList1");

list.insertBefore(node,list.childNodes[0]);

5.JavaScript 添加最後一個子節點

appendChild() 方法向節點添加最後一個子節點。

appendChild() 方法可向節點的子節點清單的末尾添加新的子節點。

文法：parentNode.appendChild(newListItem);

newListItem為待插入的節點

例如：轉移某個清單項到另外一個清單項：

document.getElementById("myList1").appendChild(node);

6.Javascript擷取子節點

文法：nodeObject.children

其中，nodeObject 為節點對象（元素節點），傳回值為所有子節點的集合（數組）。

例如，擷取 id="demo" 的節點的所有子節點：

document.getElementById("demo").children;

7.Javascript擷取兄弟節點

在Javascript中，通過 previousSibling 來擷取上一個節點。

文法：nodeObject.previousSibling

執行個體

傳回某節點之前緊跟的節點:

document.getElementById("item2").previousSibling;

8.Javascript 克隆（複制）節點

在JavaScript中，可以通過 cloneNode() 方法來克隆（複制）節點。

文法：nodeObject.cloneNode(boolean)

nodeObject 節點對象，即要克隆的節點

boolean  布爾值，是否完全克隆。

true：完全克隆。完全克隆一個節點，就是克隆它的一切，包括它的子節點，文本節點，凡是有的，一律克隆；

false：隻克隆目前節點，不克隆任何子節點，也不克隆它所包裹的文本 。

執行個體:

var p = document.getElementsByTagName("p")[0]; 

var cP = p.cloneNode();//克隆p節點 

var cP = p.cloneNode(true);//克隆p節點，深度克隆，克隆節點以及節點下面的子内容。