一．DOM简介
Document Object Model 文档对象模型
DOM包含了所有HTML元素的属性和方法，以及访问他们的方式；
#二．DOM节点
#1. 什么是节点？
HTML中所有的元素都是一个节点
整个文档是文档节点
所有的标签都是元素节点
标签内的属性是属性节点
标签内的文本是文本
#2. 节点属性
| Ele.nodeName | Ele.nodeType | Ele.nodeValue | |
|---|---|---|---|
| 元素节点 | 大写的标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
| 注释节点 | #comment | 8 | 注释内容 |
| 文档节点 | #document | 9 | null |
*** ** ** 元素的tagName等价于nodeName
#3. 节点关系
会识别空白文本(不常用)
元素.firstChild 第一个子节点
元素.lastChild 最后一个子节点
元素.childNodes 获取所有的子节点
元素.attributes 获取某个元素的所有属性节点
元素.nextSibling 获取下一个兄弟节点
元素.previousSibling 获取上一个兄弟节点
不识别空白文本
元素.children 获取所有的元素子节点
元素.firstElementChild 获取第一个元素子节点
元素.lastElementChild 获取最后一个元素子节点
元素.nextElementSibling 获取下一个元素兄弟节点
元素.previousElementSibling 获取上一个元素兄弟节点
元素.parentNode 父节点
#三．查找元素
语法：元素.getElementById(“id”)
功能：通过id名查找元素
返回值：DOM对象
语法：元素.getElementsByTagName(“tag”)
功能：通过标签名查找元素
返回值：类数组
语法：元素.getElementsByClassName(“class”)
功能：通过class名查找元素
返回值：类数组
语法：元素.querySelector("css选择器");
功能：根据css选择器查找，只找一个
返回值：DOM对象
语法：元素.querySelectorAll("css选择器");
功能：根据css选择器查找，找所有
返回值：类数组
类数组转数组:
**[... ** 类数组];
Array.from(类数组);
#四．元素类名
classList: 所有类名组成的类数组
classList.add() 添加类名
classList.remove() 删除类名
classList.contains() 检测类名是否存在,返回布尔值
classList.toggle() 类名存在则删除，类名不存在则添加
#五．课堂案例
#1. 选中高亮
效果图
功能思路分析:
1. 给每一个li绑定点击事件(forEach)
2. 点击事件中，利用排他思想，先去掉所有标签的类名
3. 再给当前标签加上类名
#2.手风琴
效果图:
功能思路分析:
1. 给每一个li绑定点击事件(forEach)
2. 点击事件中，利用排他思想，先去掉所有标签的类名
3. 再给当前标签加上类名
#3.选项卡
效果图
功能思路分析:
1. 淡入淡出效果需要先将所有的图片定位在一起,修改他们的透明度(opacity)
2. 给每一个导航信息绑定点击事件
3. 点击事件中，利用排他思想去掉所有的类名，并找到对应下标的图片去掉类名
4. 给点击的元素加上类名，并找到对应下标的图片加上类名(classList.add)
#六．今日小结
1.节点关系: firstElementChild lastElementChild
previousElementSibling nextElementSibling
children parentNode
2.查找元素: document.querySelector( ‘css选择器’)
document.querySelector( ‘css选择器’)
3.类名操作: classList.add() classList.remove()
classList.contains() classList.toggle()
#七．作业 -- 轮播图
将案例3选项卡改编成轮播图效果
1. 加上定时器(setInterval)自动轮播
2. 添加左右箭头，上一页下一页切换