1.Web API的基本认知
变量声明
变量声明有三个 var let 和 const
我们应该用那个呢?
首先var 先排除,老派写法,问题很多,可以淘汰掉…
let or const ?
建议: const 优先,尽量使用const,原因是:
Ø const 语义化更好
Ø 很多变量我们声明的时候就知道他不会被更改了,那为什么不用 const呢?
Ø 实际开发中也是,比如react框架,基本const
如果你还在纠结,那么我建议:
有了变量先给const,如果发现它后面是要被修改的,再改为let
const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型(像数组之类的),const声明的变量,里面存的不是 值,不是值,不是值,是 地址
总结
- 以后声明变量我们优先使用哪个?
Ø const
Ø 有了变量先给const,如果发现它后面是要被修改的,再改为let- 为什么const声明的对象可以修改里面的属性?
Ø 因为对象是引用类型,里面存储的是地址,只要地址不变,就不会报错
Ø 建议数组和对象使用 const 来声明- 什么时候使用let声明变量?
Ø 如果基本数据类型的值或者引用类型的地址发生变化的时候,需要用let
Ø 比如 一个变量进行加减运算,比如 for循环
1.1作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类:DOM (文档对象模型)、BOM(浏览器对象模型)
1.2 什么是DOM
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文:DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用
Ø 开发网页内容特效和实现用户交互
总结
- Web API阶段我们学习那两部分?
Ø DOM
Ø BOM- DOM 是什么?有什么作用?
Ø DOM 是文档对象模型
Ø 操作网页内容,可以开发网页内容特效和实现用户交互
1.3 DOM树
DOM树是什么
Ø 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
Ø 描述网页内容关系的名词
Ø 作用:文档树直观的体现了标签与标签之间的关系
1.4 DOM对象(重要)
··DOM对象:浏览器根据html标签生成的 JS对象
Ø 所有的标签属性都可以在这个对象上面找到
Ø 修改这个对象的属性会自动映射到标签身上
··DOM的核心思想
Ø 把网页内容当做对象来处理
··document 对象
Ø 是 DOM 里提供的一个对象
Ø 所以它提供的属性和方法都是用来访问和操作网页内容的
例:document.write()
Ø 网页所有内容都在document里
总结
- DOM 树是什么?
Ø 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM树
Ø 作用:文档树直观的体现了标签与标签之间的关系- DOM对象怎么创建的?
Ø 浏览器根据html标签生成的 JS对象(DOM对象)
Ø DOM的核心就是把内容当对象来处理- document 是什么?
Ø 是 DOM 里提供的一个对象
Ø 网页所有内容都在document里面
2.获取dom对象
2.1 根据CSS选择器来获取DOM元素 (重点)
1. 选择匹配的第一个元素
··语法:
document.querySelector('css选择器')
··参数:包含一个或多个有效的CSS选择器 字符串
··返回值:CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到,则返回null
2. 选择匹配的多个元素
··语法:
document.querySelectorAll('css选择器')
··参数:
包含一个或多个有效的CSS选择器 字符串
··返回值:
CSS选择器匹配的NodeList 对象集
但是得到的是一个伪数组:
Ø 有长度有索引号的数组
Ø 但是没有 pop() push() 等数组方法
想要得到里面的每一个对象,则需要遍历(for)的方式获得。
哪怕只有一个元素,通过querySelectAll() 获取过来的也是一个伪数组,里面只有一个元素而已
总结
- 获取一个DOM元素我们使用谁?能直接操作修改吗?
Ø querySelector()
Ø 可以- 获取多个DOM元素我们使用谁?能直接修改吗? 如果不能可以怎么做到修改
Ø querySelectorAll()
Ø 不可以, 只能通过遍历的方式一次给里面的元素做修改
总结
- 获取页面中的标签我们最终常用那两种方式?
Ø querySelectorAll()
Ø querySelector()- 他们两者的区别是什么?
Ø querySelector() 只能选择一个元素, 可以直接操作
Ø querySelectorAll() 可以选择多个元素,得到的是伪数组,需要遍历得
到每一个元素- 他们两者小括号里面的参数有神马注意事项?
Ø 里面写css选择器
Ø 必须是字符串,也就是必须加引号
2.2 其他获取DOM元素方法(了解)
// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素 获取页面中所有的div
document.getElementsByName('div')
// 根据类名获取元素 获取界面中所有类名为w的
document.getElementsByClassName('w')
三、操作元素内容
1. 元素innerText 属性
Ø 将文本内容添加/更新到任意标签位置
Ø 显示纯文本,不解析标签
2. 元素.innerHTML 属性
Ø 将文本内容添加/更新到任意标签位置
Ø 会解析标签,多标签建议使用模板字符
into.innerHTML=`hi,我是<strong>刘德华</strong>`
总结
- 设置/修改DOM元素内容有哪2钟方式?
Ø 元素.innerText 属性
Ø 元素.innerHTML 属性- 三者的区别是什么?
Ø 元素.innerText 属性 只识别文本,不能解析标签
Ø 元素.innerHTML 属性 能识别文本,能够解析标签
Ø 如果还在纠结到底用谁,你可以选择innerHTML
四.操作元素属性
4.1 操作元素常用属性
还可以通过 JS 设置/修改标签元素属性,比如通过 src更换 图片
最常见的属性比如: href、title、src
对象.属性=值
// 1.获取图片元素
const img =document.querySelector('img')
// 2.修改属性 对象.属性=值
img.src='./a1.jpg'
// 没实现???
img.title='你好呀'
4.2 操作元素样式属性
1.通过 style 属性操作CSS
语法
对象.style.样式属性=值
// 1.获取元素
const box=document.querySelector('.box')
// 2.修改样式属性 对象.style.样式属性=''
box.style.width='300px'
// 多组单词采用小驼峰命名法
box.style.backgroundColor='hotpink'
box.style.border='2px solid blue'
box.style.borderTop='2px solid red'
总结
- 设置/修改元素样式属性通过________属性引出来?
- 如果需要修改一个div盒子的样式,比如 padding-left, 如何写?
Ø element.style.paddingLeft = ‘300px’ Ø 小驼峰命名法- 因为我们是样式属性,一定别忘记,大部分数字后面都需要加单位
2. 操作类名(className) 操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。
语法:
//active是一个css类名
元素.className='active'
注意:
- 由于class是关键字, 所以使用className去代替
- className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
总结
- 使用 className 有什么好处?
Ø 可以同时修改多个样式- 使用 className 有什么注意事项?
Ø 直接使用 className 赋值会覆盖以前的类
3. 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
语法
// 1.获取元素
const box=document.querySelector('.box')
// 2.修改元素
// 2.1 追加类 add()类名不加点,并且是字符串
box.classList.add('active')
// 2.2 删除类 remove('box')
box.classList.remove('box')
// 2.3 切换类 toggle()有就删除,没有就加上
box.classList.toggle('active')
总结
- 使用 className 和classList的区别?
Ø 修改大量样式的更方便
Ø 修改不多样式的时候方便
Ø classList 是追加和删除不影响以前类名
4.3 操作表单元素 属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
Ø 获取: DOM对象.属性名
Ø 设置: DOM对象.属性名 = 新值
表单.value=‘用户名’
表单.type=‘password’
·· 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
·· 比如: disabled、checked、selecte
const button=document.querySelector('button')
// console.log(button.disabled);
// 默认false 不禁用
button.disabled=true
4.4 自定义属性
l 标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如: disabled、checked、
selected
l 自定义属性:
Ø 在html5中推出来了专门的data-自定义属性
Ø 在标签上一律以data-开头
Ø 在DOM对象上一律以dataset对象方式获取
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one=document.querySelector('div')
console.log(one.dataset.id);
// 1
console.log(one.dataset.spm);
五、定时器-间歇函数
目标:能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
1. 开启定时器
setInterval(函数,间隔时间)
setInterval(function(){
console.log('一秒执行一次');
},1000)
Ø 作用:每隔一段时间调用这个函数
Ø 间隔时间单位是毫秒
2. 关闭定时器
function fn()
{
console.log('一秒执行一次');
}
let n= setInterval(fn,1000)
console.log(n);
// 关闭定时器
clearInterval(n )
一般不会刚创建就停止,而是满足一定条件再停止
注意:
- 函数名字不需要加括号
- 定时器返回的是一个id数字
总结
- 定时器函数有什么作用?
Ø可以根据时间自动重复执行某些代码- 定时器函数如何开启?
Ø setInterval(函数名, 时间)- 定时器函数如何关闭?
let 变量名=setInterval(函数,间隔时间)
clearInterval(变量名)