JavaScript 进阶课程笔记 第一天

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 定时器函数基本使用

1. 定时器函数开启

setInterval(函数名，时间)

2. 定时器函数关闭

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)