dom操作

dom操作及案例

• dom增加操作

 // 增加
<div id = "wrap"></div> 
var dwrap = document.getElementByID("wrap");
 var p1 = document.creatElement("p");
 p1.innerHTML="";
 //将p1放在指定位置
 dwrap.appendchild(p1);
 //拼接节点
 fn.appendChild()
 //插入节点
 fn.insertBefore(new,old);

// 可以进行循环遍历增加
//设置,修改属性样式,通过其设置的自定义属性通过点语法是不能调用的
fn.setAttribute()
//获取属性样式
fn.getAttribute()

//克隆节点 true 包含子节点 false 不包含子节点
fn.cloneNode(true、false)
var d = drawp.cloneNode(dwrap,true);


* dom删除操作

var d = document.getElementByID("");
//删
dwrap.removeChild(d);
// 删除属性节点
//获取属性节点
var d1 = document.getElementByID("");
var c = d1.getAttributeNode("");
d1.removeAttributeNode(c);



* dom修改操作


var d1 = document.getElementByID("dw");
var p = document.creatElementByID("p");
p.innerHTML = "1";
dwrap.replaceChild(p,d1)

 * 查找操作
 fn.getElementById();
 fn.getElementByTagName();
 fn.getElementByClassName();
 fn.getElementByName();//表单常用

 fn.querySelector("");//里面写法与css类似
 fn.querySelectorAll("");//类数组

 var li2 = li1.nextElementSibling;//获取li1下一个节点
 ul.firstElementChild //获取ul下第一个子节点

 //获取节点后通过style属性控制样式，通过点语法调用标签属性，通过classList控制样式