JavaScript 进阶课程笔记 第一天
一、Web API 基本认知
1.1 作用和分类
- 作用:就是使用JS去操作 HTML 和浏览器
- 分类:DOM(文档对象模型),BOM(浏览器对象模型)
1.2 什么是DOM(Document Object Model)
DOM是浏览器提供的一套专门用来操作网页内容的功能
1.3 DOM树
- 作用:文档书直观的体现了标签与标签之间的关系
1.4 DOM对象
DOM
对象:浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
二、获取DOM元素
2.1 根据CSS选择器来获取DOM元素(重点)
语法
//获取一个元素
document.querySelector('css选择器')
//获取多个元素
document.querySelectorAll('css选择器') //得到一个伪数组
//其他获取DOM元素的方法(了解)
document.getElementById('nav') id
document.getElementByTagName('div') 标签
document.getElementsByClassName('w') 类名
三、设置/修改DOM元素内容
3.1 document.write() 方法
3.2 对象.innerText 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
3.3 对象.innerHTML 属性(纠结就用它)
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
四、设置/修改DOM元素属性
4.1 设置/修改元素常用属性
最常见的属性比如: href、title、src 等
4.2 设置/修改元素样式属性
-
比如通过 轮播图小圆点自动更换颜色样式
-
点击按钮可以滚动图片,这是移动的图片的位置 left 等等
-
通过 style 属性操作CSS
-
操作类名(className) 操作CSS
如果修改的样式较多,需要添加一个类,使用新值换旧值
元素.className = "新的类名"
注:会覆盖掉之前的类名
- 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
//追加一个类
元素.classList.add()
//删除一个类
元素.classList.remove()
//切换一个类
元素.classList.toggle()
4.3 设置/修改 表单元素 属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如: disabled、checked、selected
五、定时器-间歇函数
5.1 定时器函数介绍
网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发
例如:网页中的倒计时
5.2 定时器函数基本使用
- 定时器函数开启
setInterval(函数名,时间)
- 定时器函数关闭
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)