前端学习笔记

day19
dom操作

1.创建元素节点： createElement

var oP=document.createElement("p")
                                //将p扔进div里

2.新增节点：appendChild

var oP=document.createElement("p")
oDiv.appendChild(op)              //在已有的标签后面新增  带有事件的标签

3.创建文本节点：createTextNode

var oText=document.createTextNode("hello")
var oP=document.createElement("p")
oDiv.appendChild(oP)
oP.appendChild(oTxt)

4.替换已有的标签：replaceChild

var oP = document.querySelector("p");
var oSpan = document.querySelector("span");
oDiv.replaceChild(oP, oSpan)

5.删除标签：remove removeChild

 var oSpan = document.querySelector("span");
 oSpan.remove();
 oDiv.removeChild(oSpan);

6.取删除元素：只能取removeChild删除的元素

var rmNode = oDiv.removeChild(oSpan);
oDiv.appendChild(rmNode); 

7.查子元素节点

var oDiv = document.querySelector("div");
      var aPs = oDiv.children;
      console.log(aPs);
      console.log(aPs[0]);

8.查父元素节点

 console.log(oDiv.parentNode);

9.添加移除类

oDiv.classList.add("test2"); 
oDiv.classList.remove("test1");

10.DOM提供了操作属性节点的API 既支持默认属性还支持自定义属性 ，用于获取某个元素所有属性节点的方式

console.log(oDiv.attributes);
oDiv.setAttribute("abc", 123); //自定义的属性
 oDiv.removeAttribute("abc");//移除

11.取元素宽高

var oDiv = document.querySelector("div");
//console.log(oDiv.style.width);
console.log(oDiv.clientWidth, oDiv.clientHeight); //width+padding 120 120 console.log(oDiv.offsetWidth, oDiv.offsetHeight); //width+padding+border 140 140

//通用的取样式属性的值的方式 无论是行内，内部，外部引入
console.log(getComputedStyle(oDiv)["width"]); //有单位 带单位
//所有的js改样式
//domobj.style.styleName = value;