DOM
DOM Document Object Model
文档对象模型
操作HTML的节点（HTML标签）
DOM发展史
DOM0
DOM1 1998年 w3c推荐版本
DOM2 2000年 (主讲)
DOM3 2004年（主讲）
DOM4 2015年
1. 节点Node
NodeName节点名字 NodeType节点类型 NodeValue节点值
元素节点:ElementNode 标签名 1 null
文本节点:TextNode #text 3 文本内容
属性节点:attributeNode 属性名 2 属性值
2. 快速查找节点
document
get获取
Element元素
ById通过ID
（1）通过ID值获取元素节点（ID唯一）
格式： document.getElementById(ID值); 参数必须是字符串
let divEle = document.getElementById("F66");
console.log(divEle);//<div>
（2）通过元素名称（标签名）获取元素节点 0到多个
格式： document.getElementsByTagName(标签名称);
let sectionEle = document.getElementsByTagName("section");
console.log(sectionEle[1]);//[section]
(3）通过name值获取元素节点 0到多个
格式： document.getElementsByName(name值);
let asideEle = document.getElementsByName("F66");
console.log(asideEle[0]);//
（4）通过class值获取元素节点 0到多个
格式： document.getElementsClassName(class值);
let footerEle = document.getElementsByClassName("F67");
console.log(footerEle);
console.log(footerEle[0]);
console.log(footerEle[1]);
（5）可以通过CSS选择器来获取第1个满足条件的元素节点
格式： document.querySelector(css选择器);
let navEle = document.querySelector("header>nav");
console.log(navEle);
（6）可以通过CSS选择器来获取所有满足条件的元素节点
格式： document.querySelectorALL(css选择器);
let navEle1 = document.querySelectorAll("header>nav");
console.log(navEle1);
console.log(navEle1[0]);
console.log(navEle1[1]);
###### DOM 节点增、删、改、查
1. 查找
关系层次查找节点
let spanEle1 = document.querySelector("article>.F01>p:nth-child(1)>span")
console.log(spanEle1);
查找父节点 格式：当前节点.parentNode
console.log(`我是元素1的父节点：`,spanEle1.parentNode);
查找兄弟节点
let spanEle2 = document.querySelector("article>.F01>p:nth-child(1)>span:nth-child(2)")
console.log(spanEle2);//元素2
向前查找兄弟节点
console.log(`我是前一个兄弟节点：`,spanEle2.previousSibling);//#text
console.log(`我是前一个兄弟节点：`,spanEle2.previousSibling.previousSibling);//元素1
向后查找兄弟节点
console.log(`我是前一个兄弟节点：`,spanEle2.nextSibling);//#text
console.log(`我是前一个兄弟节点：`,spanEle2.nextSibling.nextSibling);//元素3
[扩展]
let ele =spanEle2.previousSibling.nextSibling.nextSibling.previousSibling.nextSibling.nextSibling;
console.log(ele);
查找子节点
let pEle = document.querySelector("article>.F01>p:nth-child(1)");
console.log(pEle.firstChild);//#text
查找最后一个子节点
console.log(pEle.lastChild);//#text
console.log( pEle.children);
console.log( pEle.children[0]);
console.log( pEle.children[1]);
console.log( pEle.children[2]);
查找第一个子元素节点
console.log(pEle.firstElementChild);//元素1
查找最后一个子元素节点
console.log(pEle.lastElementChild);//元素3
查找兄弟元素节点
let spanEle2 = document.querySelector("article>.F01>p:nth-child(1)>span:nth-child(2)");
向前查找兄弟元素节点
console.log(`我是前一个兄弟元素节点：`,spanEle2.previousElementSibling);//元素1
向后查找兄弟元素节点
console.log(`我是后一个兄弟元素节点：`,spanEle2.nextElementSibling);//元素3
3. ##### 新增节点
- 实现步骤
###### 1.创建元素节点
书写格式：document.createElement('元素');
###### 2.创建元素内容（文本节点）
书写格式：document.createTextNode('元素内容');
###### 3.新节点的存放位置
书写格式：元素节点.appendChild(文本节点);
插入
书写格式：父元素.insertBefore(参1,参2);//参数1是新元素，参数2是已有元素
删除
书写格式：父元素.removeChild(当前元素节点);
修改元素
书写格式：父元素.replaceChild(参1,参2);//参1：新元素；参2：旧元素
快速替换元素内容
方式一：书写格式：父元素.innerText = "元素内容";//写什么就在页面显示什么
方式二：书写格式：父元素.innerHTML = "元素内容";//能够识别HTML代码
克隆节点
1. 深克隆 包含复制节点的子节点
书写格式：let 新节点 = 克隆节点.cloneNode(true);
2. 浅克隆 只复制元素节点，其子节点不复制
书写格式：let 新节点 = 克隆节点.cloneNode(false);
* 属性节点
1.查找存在的属性
```
书写格式：当前节点.getAttribute("属性名");//属性值
```
书写格式：当前节点.getAttribute("属性名");//属性值
```
2.查找不存在的属性
```
书写格式：当前节点.getAttribute("属性名");//null
```
书写格式：当前节点.getAttribute("属性名");//null
```
3.修改属性节点的值
```
书写格式：当前节点.setAttribute("参1","参2");//参1：属性名 参2：新的属性值
```
书写格式：当前节点.setAttribute("参1","参2");//参1：属性名 参2：新的属性值
```
4.新增
```
书写格式：当前节点.setAttribute("参1","参2");//参1：新的属性名 参2：新的属性值
```
书写格式：当前节点.setAttribute("参1","参2");//参1：新的属性名 参2：新的属性值
```
5.删除
```
书写格式：当前节点.removeAttribute("属性名");
```
书写格式：当前节点.removeAttribute("属性名");
```
6.设置属性由于class在js中是关键字，无法使用
为了能够修改class属性，特地提供className进行设置
```
书写格式：当前节点.className = "新属性值";
```
7.设置属性由于label在js中是关键字，无法使用
为了能够修改label属性，特地提供htmlFor进行设置
```
书写格式：当前节点.htmlFor = "新属性值";
```
8.自定义属性 以date-开头
```
示例：
```
```
//html部分
<nav class="F67" id="F88" data-lovo="456">我是兄弟
<p><span>1</span></p>
<p><span>2</span></p>
<p><span>3</span></p>
</nav>
//js部分
let navEle = document.querySelector(".F67");
navEle.dataset.lovo ="123";
//最终<nav>中的data-lovo="123"
```
书写格式：当前节点.className = "新属性值";
```
7.设置属性由于label在js中是关键字，无法使用
为了能够修改label属性，特地提供htmlFor进行设置
```
书写格式：当前节点.htmlFor = "新属性值";
```
8.自定义属性 以date-开头
```
示例：
```
```
//html部分
<nav class="F67" id="F88" data-lovo="456">我是兄弟
<p><span>1</span></p>
<p><span>2</span></p>
<p><span>3</span></p>
</nav>
//js部分
let navEle = document.querySelector(".F67");
navEle.dataset.lovo ="123";
//最终<nav>中的data-lovo="123"
```
