DOM技术点

全称：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);