全称：Document（浏览器）Object（对象）Model（模型）
DOM0
DOM1 1998年 w3c标准
DOM2 2000年 （）
DOM3 2004年 （）
DOM4 2015年
## 1、节点Node：元素、标签、注释
// 节点名称 节点类型 节点的值
// (NodeName) (NodeType) (NodeValue)
// 元素节点 标签名 1 null
// 文本节点 #text 3 文本内容
// 属性节点 属性名 2 属性值
节点也是一个对象
### 通过ID值获取元素
get 获取、Element 元素、By 通过、Id
// let getNode = document.getElementById("box3");
// console.log(getNode);
// console.log(getNode.nodeName); //获取到的节点名称都是大写字母DIV
// console.log(getNode.nodeType); //1
// console.log(getNode.nodeValue); //null
// // 便捷方式
// console.log(box2.nodeName);
// console.log(box2.nodeType);
// console.log(box2.nodeValue);
### 通过类名获取元素
//类名是可以0-多个，因此需要存储多个数值的变量来接收（类数组）
// let art = document.getElementsByClassName("xlb");
// console.log(art); //输出数组
// console.log(art[2]); //获取具体的元素用下标
### 通过标签名获取元素
let art = document.getElementsByTagName("div");
console.log(art); //输出数组
console.log(art.length);
console.log(art[2].style.color="red"); //获取具体的元素用下标
### 通过Name值来获取元素
let nameNode = document.getElementsByName("f68")[0];
console.log(nameNode);
### 通过CSS选择器获取元素
querySelector和querySelectorAll这两种方法的特点：
1、IE8以下不支持
2、无法实时返回元素（删除或增加）
弊端：不能实时监控数据，删除时无法更新
//.querySelector 获取第一个满足条件的元素
// let artSpanNode = document.querySelector("article span");
//.querySelectorAll获取所有满足条件的元素
// let artSpanNode = document.querySelectorAll("article span");
// console.log(artSpanNode[1]);
// let artSpanNode = document.querySelectorAll("article>header>.box>.box1");
// console.log(artSpanNode);
// let SpanNode = document.getElementsByClassName("box")[0];
// console.log(SpanNode);
### 兄弟元素，选中下一个
//console.log(SpanNode.nextSibling); //#text 文本节点，回车也算一个节点
//console.log(SpanNode.nextSibling.nextSibling); //<span>abcdef</span>
//下一个元素节点
// console.log(SpanNode.nextElementSibling);//<span>abcdef</span>
### 兄弟元素，选中上一个
//console.log(SpanNode.previousSibling); //#text
//console.log(SpanNode.previousSibling.previousSibling); //<span>123456</span>
//上一个元素节点
// console.log(SpanNode.previousElementSibling);//<span>123456</span>
//获取父节点
//let faNode = SpanNode.parentNode;
// console.log(faNode);
//获取子元素节点
//console.log(faNode.children);//nav的所有子元素节点
//获取第一个子节点
// console.log(faNode.firstChild);//#text
//获取第一个子元素节点
// console.log(faNode.firstElementChild);
//获取最后一个子节点
//console.log(faNode.lastChild);//#text
//获取最后一个子元素节点
// console.log(faNode.lastElementChild);
## 2、新增节点：
//获取父节点
let artEle =document.querySelector(".box1");
console.log(artEle);
// step1、节点名称
// 格式：document.createElement("标签名");
let headerEle = document.createElement("header");
console.log(headerEle);
//step2、元素内容
let headerText = document.createTextNode("f68");
console.log(headerEle.innerText);//空
//step3、添加文本节点
headerEle.appendChild(headerText);
console.log(headerEle.innerText);
//step4、添加节点
artEle.appendChild(headerEle);
//获取2个header一样的节点：
//必须重新获取两个节点，相同节点相当于剪切，移动后会删除原来的节点
let headerEle2 = document.createElement("header");
let headerText2 = document.createTextNode("f68");
headerEle2.appendChild(headerText2);
artEle.appendChild(headerEle2);
## 3、修改|替换节点内容：
* .innerText和.innerHTML区别？
* 都是节点的属性。把所有内容当字符串的方式显示到节点的内容中
会改变、替换原来的东西
* 注：如果字符串中包含标签，.innerHTML 会识别成元素，.innerText 会当成普通文本
* 会快速修改| 替换节点里面的内容
// spanEle.innerText = `${count}秒后自动关闭X`;
// let pEle=document.querySelector(".box2");
// let count = 5;
// pEle.innerHTML = `<span>${count--}秒后自动关闭X</span>`;
// console.log(pEle);
## 实现广告倒计时
// let spanEle = document.querySelector("aside>span");
// console.log(spanEle);
// // window.onload 加载
// let count = 5;
// function f68() {
// if (count > 0) {
// spanEle.innerText = `${count--}秒后自动关闭X`;
// let asideEle = document.querySelector("aside");
// asideEle.style.bottom="10px";
// asideEle.style.visibility="visible";
// } else {
// asideEle.style.bottom="-200px";
// clearInterval(timer);
// }
// }
// let timer = setInterval(f68, 1000);
## 插入节点(不存在的节点)
插入页面中不存在的节点：
//格式：父节点.insertBefore(B,A);
//获取父节点
//let pEle = document.getElementsByClassName("box2")[0];
//被插入的节点 A
// let emEle = document.getElementsByClassName("haha")[0];
// //创建插入节点 B
// let spanEle = document.createElement("span");
// //插入新创建的节点
// //格式：父节点.insertBefore(B,A);
// pEle.insertBefore(spanEle,emEle);
// console.log(pEle);
## 移动节点：已有的节点
插入页面中已有的节点：
// let pEle = document.getElementsByClassName("box2")[0];
// //被插入的节点 A
// let emEle = document.getElementsByClassName("haha")[0];
// //创建插入节点 B
// let strongEle = document.querySelector("strong");
// //插入新创建的节点
// pEle.insertBefore(strongEle,emEle);
// console.log(pEle);
## 删除节点:
//不能用delete，，，，，
// let headerEle = document.querySelector("header");
// let navEle = document.querySelector("nav");
// console.log(navEle);
### 格式1：.remove();
格式1：被删除节点.remove();
// navEle.remove();
// console.log(headerEle);
### 格式2：.removeChild();
格式2：父节点.removeChild(被删除子节点);
// headerEle.removeChild(navEle); //removeChild方法
// console.log(headerEle);
## 替换节点 .replaceChild
step1、获取被替换的节点
step2、获取新节点
step3、获取替换元素的父节点
书写格式：父节点.replaceChild(新节点,替换节点);
// let citeEle = document.querySelector("cite");
// console.log(citeEle);
// let qNew=document.createElement("q");
// let faEle =document.querySelector("footer");
// // let faEle =citeEle.parentNode;
// // let faEle =citeEle.parentElement;
// //书写格式：父节点.replaceChild(新节点,替换节点);
// faEle.replaceChild(qNew,citeEle);
// console.log(faEle);
## 属性
// let imgEle = document.querySelector("img");
### 获取节点的属性值.getAttribute
// let srcEle = imgEle.getAttribute("src");
### 设置节点的属性值.setAttribute
//如果有就是替换修改，如果没有这个属性就新增
// function f68(){
// imgEle.setAttribute("src","./IMG/shutter_2.jpg");
// imgEle.setAttribute("class","box box1");
// }
//例2：快速修改和添加节点属性（属性名和属性值）
// let imgEle = document.querySelector("img");
// function f68(){
// imgEle.src="./IMG/shutter_2.jpg";
// imgEle.className="box box1";
// }
### 删除属性 .removeAttribute;
删除属性 .removeAttribute(属性名);
// imgEle.removeAttribute("name");
## 通过属性选择器获取自定义属性节点
//自定义属性名要加一个前缀，data-名字（data:公司名）
// let divEle = document.querySelector(`[data-f68="123"]`);
// console.log(divEle);
//例3：原有自定义属性 .dataset.f68="";
// function f68() {
// divEle.dataset.f68="lovo"; //data- 识别不了，用dataset.类名实现
// }
## 给节点添加样式
//以内嵌样式来实现样式添加:
// let divEle = document.querySelector(".zl");
// divEle.style.width="100px";
// divEle.style.height="100px";
// divEle.style.backgroundColor="deeppink";
// divEle.innerText="张雨涵";
// divEle.style.color="white";
// divEle.style.position="absolute";
// divEle.style.right="10px";
// divEle.style.bottom="10px";
// console.log(divEle);
## 获取节点css样式
// let asideEle = document.querySelector("aside");
//获取行内样式
// console.log(asideEle.style.height);
// 获取外部样式
//.client 会加上 content+padding
// console.log("clientHeight",asideEle.clientHeight);
// console.log(".clientWidth",asideEle.clientWidth);
// //.offset 会加上 content+padding+border
// console.log("offsetHeight",asideEle.offsetHeight);
// console.log("offsetWidth",asideEle.offsetWidth);
## 获取节点的位置
::判断当前节点的上级元素有没有固定或绝对定位，有就是离父级的距离，没有就是离视口的距离
//节点离视口的位置
console.log("offsetLeft",asideEle.offsetLeft);
console.log("offsetTop",asideEle.offsetTop);
//节点离包含快的位置
console.log("offsetLeft",spanEle.offsetLeft);
console.log("offsetTop",spanEle.offsetTop);