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