JS基础-webApi-DOM

DOM的本质

dom的数据结构是树（dom树）

DOM节点操作

1.获取节点方法

let num1 = document.getElementById("num1")    //根据id来获取
let pList = document.getElementsByTagName("p")   //根据节点名来获取 集合
let nameList = document.getElementsByName("val")  //根据 atrr的name来进行获取 集合
let classList = document.getElementsByClassName("red")  //根据class名来进行获取 集合
let queryList = document.querySelectorAll(".box p")  //根据css选择器来进行获取 集合
let queryItem = document.querySelector(".box p")  //根据css选择器来进行获取 返回匹配的第一个元素

2.DOM节点的property
property不是一个具体的属性也不是api的一部分，它是一种形式。以对象属性的形式来操纵节点样式。

queryItem.style.color = "red"   //获取到的这个p标签 的style变为"style='color:red'"
queryItem.className = "blue"   //获取到的这个p标签的class变为 "class='blue'"

3.DOM节点的atrribute
使用setAtrribute和getAtribute这样的api来直接修改DOM结构。

let p = document.querySelector("p")
p.setAttribute("school-name","上海大学");
console.log(p.getAttribute("school-name"))  //上海大学

4.DOM结构操作

//新增节点
let div1 = document.getElementById("num1"); //上面的div
let newP = document.createElement("p");
newP.innerHTML = "刚刚新建的一个p"；
div1.appendChild(newP);  //会加在div1的最后一个节点后面

//移动已有节点
let div2 = document.getElementById("num2"); //下面的div
let p3 = document.querySelector(".box p:nth-child(3)");
div2.appendChild(p3);

//获取父元素
console.log(p3.parentNode);
//获取子元素
const div2ChildNodes = div2.childNodes;
console.log(div2ChildNodes); //直接获取的有所有的节点类型 包括text和document等
//所以需要进行过滤
const div2ChildNodesP = Array.prototype.slice.call(div2ChildNodes).filter(el => {
if(el.nodeType===1){
     return true;
  }
return false;
})
console.log(div2ChildNodesP);    //现在是只有元素

// 删除
div2.removeChild(div2ChildNodesP[1])
div2.removeChild(document.querySelector(".box2 p"))

5.DOM性能

• dom性能比较“昂贵”，应该避免频繁的dom操作；
• 对dom查询进行缓存；
• 将频繁操作改为一次性操作；