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)自动轮播