web api基本认知
- 作用:就是使用js去操作html和浏览器
- 分类:dom(文档对象模型)、bom(浏览器对象模型)
js包含ECMAScript 跟 web apis 其中 web apis里面包含了dom(页面文档对象模型) ,bom(浏览器对象模型)
DOM
-
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
-
白话文：DOM是浏览器提供的一套专门用来 操作* 网页*内容 的功能
-
DOM作用
- 开发网页内容特效和实现用户交互
DOM树
-
DOM树是什么
- 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系
DOM对象(重要)
-
lDOM对象：浏览器根据html标签生成的 JS对象
-
所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
-
DOM的核心思想
- 把网页内容当做对象来处理
-
document 对象
-
是 DOM 里提供的一个对象
-
所以它提供的属性和方法都是用来访问和操作网页内容的
- 例：document.write()
-
网页所有内容都在document里面
获取DOM对象
-
根据css选择器来获取dom元素(重点)
1.1 选择匹配的第一个元素
语法:
document.querySelector('css选择器')
参数:
包含一个或多个有效的css选择器 字符串
返回值:
css选择器匹配的第一个元素，一个htmlElement 对象
如果没有匹配到，则返回null
注意:document.querySelector获取到的元素可以直接进行dom操作
1.2 选择匹配的多个元素
语法:
document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的css选择器 字符串
返回值:
css选择器匹配的NodeList 对象集合
例如:
document.querySelectorALL('ul li')
注意:document.querySlectorAll获取到的元素需要遍历再进行dom操作
补充: 得到的是一个伪数组
- 有长度有索引号的数组
- 但是没有pop() push()等数组方法
- 想要得到里面的每一个对象，则需要遍历(如for)的方式获得
注意:哪怕只有没有元素，通过querySelectAll() 获取过来的也是一个空的伪数组，
querySelector(),querySelectorAll() 区别 以及注意事项
querySelector()只能选择一个元素， 可以直接操作querySelectorAll()可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
注意:
- 里面写css选择器
- 必须是字符串，也就是必须加引号
设置/修改DOM元素内容
-
document.write()
- 只能将文本内容追加到前面的位置
- 文本中包含的标签会被解析
-
元素.innerText（）
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
- 元素必须得是双标签，对单标签不起作用
- 它在设置的时候，不会解析标签，在获取的时候会忽略标签，只能获取文本内容
3.元素.innerHTML属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
- 元素必须得是双标签，对单标签不起作用
- 它在设置的时值会解析标签结构，在获取时候会获取到元素内部的完整的html结构
三者的区别
- document.write() 方法 只能追加到body中
- 元素.innerText 属性 只识别内容，不能解析标签
- 元素.innerHTML 属性 能够解析标签
- 如果还在纠结到底用谁，你可以选择innerHTML
元素.innerHTML属性，元素.innerText（）
设置/修改dom元素属性
-
还可以通过js设置/修改标签元素属性，比如通过src更换 图片
-
最常见的属性:比如hret title src等
-
语法
对象.属性 = 值
例如:
//获取元素
let pic = document.querySelector('img')
//操作元素
pic.src = './images/bo2.jpg'
pic.title = '这是一个图片'
设置/修改dom元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
- 比如通过 轮播图小圆点自动更换颜色样式
- 点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径:
1.通过 style 属性操作CSS
2.操作类名(className) 操作CSS
3.通过 classList 操作类控制CSS
1.通过style 属性操作css
语法:
对象.style.样式属性 = 值
let box - document.querySelector('.box')
//2. 修改背景颜色
box.style.backgroundColor = 'red'
box.style.width = '300px'
box.style.marginTop = '50px'
//需要注意的是:
1. 修改样式通过style属性引出
2. 如果属性有-连接符，需要转换为小驼峰命名法
3. 赋值的时候，需要的时候不要忘记加css单位
-
操作类名(className)操作css
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法:
//active 是一个css类名
元素.className = 'active'
注意:
- 由于class是关键字，所以使用className去代替
- className是使用新值换旧值，就是说会把原来的覆盖掉
- 如果需要添加一个类,需要保留之前的类名
- 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')
//判断永福是否拥有某个名称的样式
console.log(元素.classList.contains('size50')) //如果有这个类名 返回true
使用className 跟 classList的区别
- 修改大量样式的更方便
- 修改不多样式的时候方便
- classList 是追加和删除不影响以前类名
设置/修改表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
表单.value = '用户名'
表单.type = 'password'
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如： disabled、checked、selected
定时器
- 开启定时器
setInterval(函数，间隔时间毫秒ms)
- 作用:每隔一段时间调用这个函数
- 间隔时间是毫秒
例如:
function repeat (){
console.log('前端程序员')
}
setIntetval(repeat,1000)
//注意:1.函数名字不需要加括号
//2.定时器返回的是一个id数字
//注意函数不需要加(),如果加了()就是回调函数，repeat函数的返回值作为你想执行的操作
功能:每隔指定的时间，重复做同一个事
注意: 以后开启定时器之前，都应该先清除定时器 都要先清除
- 关闭定时器
定时器不能暂停，只能停止
let 变量名 = setIntetval(函数,间隔时间)
