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为待插入的节点

 

例如：转移某个列表项到另外一个列表项：

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

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

 

6.Javascript获取子节点

语法：nodeObject.children

其中，nodeObject 为节点对象（元素节点），返回值为所有子节点的集合（数组）。

例如，获取 id="demo" 的节点的所有子节点：

document.getElementById("demo").children;

 

7.Javascript获取兄弟节点

在Javascript中，通过 previousSibling 来获取上一个节点。

语法：nodeObject.previousSibling

其中，nodeObject 为节点对象（元素节点）。

实例

返回某节点之前紧跟的节点:

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节点，深度克隆，克隆节点以及节点下面的子内容。