js下 Day02、DOM文档对象模型
一.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. 添加左右箭头,上一页下一页切换