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 是个只读属性 |
