JS DOM操作基础

1、创建节点

//(1)、创建元素节点

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

//(2)、创建文本节点

var text1 = document.createTextNode("这是一个文本节点");

 

 

 

 

 

2、复制节点

//(1)、包含所有子节点

var dd = document.getElementById("dd");

var ele2 = dd.cloneNode(true);        //默认为true

document.body.appendChild(ele2);

//(2)、只复制指定节点(不含子节点)

var ddd = document.getElementById("ddd");

var ele2 = ddd.cloneNode(false);

document.body.appendChild(ele2);

 

 

 

 

 

 

 

 

 

3、插入节点

//(1)、appendChild

var obj = document.getElementById("obj");

document.body.appendChild(obj);

//(2)、insertBefore

var d = document.getElementById("d");

var dd = document.getElementById("dd");

var text = document.createTextNode("这是一个测试");

d.insertBefore(text,dd);

 

 

 

 

 

 

 

 

 

4、删除节点

//(1)、删除d节点下的子节点ddd

d.removeChild(ddd);

//(2)、删除ddd节点，但不知他的父节点

ddd.parentNode.removeChild(ddd);

//(3)、文档中删除d节点

document.body.removeChild(d);

 

 

 

 

 

 

 

 

 

5、替换节点

//将文档中的li替换成a

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

var a = document.createElement("a");

document.body.replaceChild(a,li);

 

 

 

 

 

 

6、设置属性节点

//设置属性节点并赋值与清空

d.setAttribute("title","this is a test");

d.setAttribute("id","");

document.body.appendChild(d);

 

 

 

 

 

 

 

 

7、查找节点

//(1)、查看属性节点值

d.getAttribute("title");

//(2)、hasChildNodes是判断是否有子节点，文本节点和属性节点永远返回false

d.hasChildNodes();

//(3)、循环遍历节点

var img = document.getElementsBytagName("img");

 

 

 

 

 

 

 

 

 

8、节点属性

//节点类型

nodeName 节点名称

nodeType 节点类型 1为元素节点 2为属性节点 3为文本节点

如果这个元素节点是文本节点的话就可以给他赋值text2.nodeValue = "this is a text2";

 

 

 

 

 

 

 

 

9、遍历节点树

//获取各个节点

1）、获取所有节点，文本和属性节点返回空数组 childNodes

2）、获取所有节点的第一个节点 firstChild 是个只读属性

3）、获取所有节点的最后一个节点 lastChild 是个只读属性

4）、获取所有节点的下一个节点 nextSibling 是个只读属性

5）、获取所有节点的上一个节点 previousSibling 是个只读属性

6）、获取给定节点的父节点 parentNode 是个只读属性