JS动态操作Dom

动态操作dom

var tab = document.getElementById(“tab”)
var btn = document.getElementById(“btn”)
var f = document.getElementsByTagName(“div”)

动态操作dom的方法:

• 1.动态创建元素:document.createElement("div")

var a = document.createElement("div")

• 2.appendChild：像容器的末尾添加一个子元素

  
 var i = 0;
    btn.onclick = function () {
        var a = document.createElement("div")
        a.innerText = i++;
        tab.appendChild(a);
    }
     

• 3.removeChild():删除容器中的子节点 父节点.removeChild(子节点)

 // btn.onclick=function(){
    //     tab.removeChild(first)
    // }
 

• 4.replaceChild()替换子节点

 //父.replaceChild(newChild,oldChild)
   var a = document.createElement("p");
   tab.replaceChild(a, first)

• 5. insertBefore :在父节点中的某个子节点的前面插入新元素；

// 父.insertBefore(newChild,oldChild)
   var b = document.createElement("div");
   tab.insertBefore(b, a)

• 6.getAttribute(“属性名”) : 获取行间属性名对应的属性值；如果行间属性名不存在，那么得到结果是null;

console.log(tab.getAttribute("id")); //tab

• 7.setAttribute : 设置行间属性所对应的属性值 setAttribute(属性名，属性值)

  //这个也可以修改id名，但是用getAttribute获取不到,得用点的方式获取
    tab.id = "f"
    console.log(tab.id) //f
    console.log(tab.getAttribute("f")) //null
  
    tab.setAttribute("a", "100")
    console.log(tab.getAttribute("a")) //100
  

• 8.removeAttribute("属性名"): 删除行间属性

tab.removeAttribute(“a”)

-  `9.classList`

//tab.classList.add(“box”)
//tab.classList.remove(“box”)
// add 新增 remove 删除 replace(old,new) 替换
tab.classList.replace(“f”, “a”)
tab.classList.add(“f”)

-  `10.cloneNode() : 克隆 ; 如果不传参数，默认是false，那么则只克隆当前元素自己,是浅克隆；`
`// 如果是true；深度克隆，将其元素以及子节点都克隆一份`