DOM节点常见操作

1.获取节点

//获取节点
document.getElementById(id);

//HTMLCollection(chrome)
document.getElementsByTagName("div");

//NodeList(chrome)
document.getElementsByName(name);

//HTMLCollection(chrome)
document.getElementsByClassName(classname);

 

2.添加节点

//在childNodes列表末尾添加节点
//如果newNode已存在，则将原节点移动到新的位置
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode === newNode); //true

 

3.插入节点

//在childNodes列表中某个特定位置中插入节点

//在最后一个位置插入
var returnedNode = someNode.insertBefore(newNode, null);
alert(returnedNode === newNode) //true

//在第一个子节点前面插入节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);

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

 

4.替换节点

//替换节点

//替换第一个节点
someNode.replaceChild(newNode, someNode.firstChild)；

//替换最后一个节点
someNode.replaceChild(newNode, someNode.lastChild);

 

5.移除节点

//移除节点

//移除第一个节点
someNode.removeChild(someNode.firstChild);

//移除最后一个节点
someNode.removeChild(someNode.lastChild);

 

6.复制节点

IE浏览器会复制事件处理程序，在复制之前最好先移除事件处理程序。

//复制节点

//深复制（子节点一起复制）
var deepList = someNode.cloneNode(true);

//浅复制（不复制子节点）
var shallowList = someNode.cloneNode(false);