一.Web API 基本认知
1.作用和分类
- 作用: 就是使用 JS 去操作 html 和浏览器
- 分类：DOM (文档对象模型)、BOM（浏览器对象模型）
2.什么是DOM
- DOM（Document Object Model）文档对象模型 是用来呈现以及与任意 HTML 或 XML文档交互的API
- 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
- DOM作用
1.实现网页特效
2.实现用户交互
3.DOM树
DOM树是什么 :
- 将 HTML 文档以树状结构直观的表现出来
-
作用：文档树直观的体现了标签与标签之间的关系
1.png
4.DOM对象
- DOM对象：浏览器根据html标签生成的 JS对象
- DOM的核心思想 :把网页内容当做对象来处理
- document 对象
1.是 DOM 里提供的一个对象
2.所以它提供的属性和方法都是用来访问和操作网页内容的 例：document.write()
3.网页所有内容都在document里面
二.获取DOM对象
1.querySelector()
语法：document.querySelector('CSS选择器')
document 文档 query 查询 selector 选择器
参数：css选择器 括号里面加引号
作用：从文档中根据css选择器获取元素
返回值: 匹配的第一个元素, 如果没有匹配到，则返回null
2.querySelectorAll()
语法：document.querySelectorAll('CSS选择器')
参数：css选择器 括号里面加引号
作用：获取所有
返回值: 元素集合
3.伪数组
querySelectorAll获取到的是一个伪数组
- 和数组长得像(下标 length)
- 可以for循环遍历
- 无法使用数组方法
- 无论是否获取到元素 始终返回伪数
4.querySelector 和 querySelectorAll区别
querySelector() 获取第一个元素 获取不到的结果是 null 可以直接操作
querySelectorAll() 获取所有的元素 始终返回伪数组 需要循环遍历拿到每一个元素再操作
5.其他获取元素语法（了解）
获取html document.documentElement
获取body document.body (head title)
通过id名来获取
document.getElementById('box1')
通过类名来获取
document.getElementsByClassName('box')
通过标签名来获取
document.getElementsByTagName
三.设置/修改DOM元素内容(操作内容)
1.innerText
语法: 对象.innerText = '内容'
只能设置文本,不会解析标签
2.innerHTML
语法:对象.innerHTML = '内容'
设置内容 可以解析识别标签
<body>
<div>给我一个粉红色的回忆</div>
<script>
// 修改元素内容 innerText innerHTML
let divObj = document.querySelector('div')
console.log(divObj)
// innerText 获取内容
console.log(divObj.innerText)
// innerText 设置内容（纯文本）
divObj.innerText = '我是一个绿色的回忆'
// innerText 设置内容（带标签）
divObj.innerText = '<h1>回忆</h1>' //h1标签不生效
// innerHTML 获取内容
// innerHTML 设置内容（纯文本）
divObj.innerHTML = 'innerHTML修改'
// innerHTML 设置内容（带标签） 可以识别解析标签
divObj.innerHTML += '<h1>innerHTML修改</h1>'
// 说明：推荐使用 innerHTML
四.设置/修改DOM元素属性(操作属性)
1.使用className操作类名修改样式
语法:语法: 元素.className = '类名'
- 在JS中. 由于class是关键字, 所以使用className表示类名
- 使用className有 覆盖 问题
2.使用classList操作类名修改样式
- classList.add() 添加类名 不会覆盖
- classList.remove() 移除类名
-
classList.toggle() 切换类名(如果有该类名,会移除掉 如果没有,会添加该类名)
2.png
classList 和 className之间的区别
className 存在覆盖问题 是属性 用 =
classList 不存在覆盖问题 add/remove/toggle 是方法 用()
3.通过 style 属性操作样式
语法: 对象.style.样式属性 = 值
本质: 通过style操作样式,本质上是设置行内样式
注意点:
- 遵守驼峰式写法
- 不要落下单位px单位
4.表单的属性设置 （value、type、disabled、checked、selected）
语法:
- 获取： 对象.属性名
- 设置： 对象.属性名 = 值
布尔类型的属性 （disabled、checked、selected）
以上三个属性的值为 true false
当设置的值不是布尔类型,底层会进行隐式转换
五.定时器
1.开启定时器
setInterval(函数, 间隔时间 单位毫秒ms)
函数不用加括号, 加了括号会立即调用函数,没有定时器效果
2.关闭定时器
clearInterval(定时器id)
