web APIs 基本认知
作用和分类
- 作用：就是使用JS去操作html和浏览器
- 分类：DOM(文档对象模型)，BOM(浏览器对象模型)
DOM基本知识
- 什么是DOM
- DOM是用来呈现以及任意HTML或XML文档交互的API
- 大白话：DOM是浏览器提供一套专门操作网页内容的功能
- DOM作用：开发网页内容特效和实现用户交互
- DOM树
- 将HTMl文档以树状结构直观表现出来，我们称之为DOM树
- 描述网页内容关系的名词
- 作用：文档数直观的体现了标签与标签之间的关系
- DOM对象
DOM对象：浏览器根据html标签生成的js对象
所有的标签属性都可以在这个对象上找到
修改这个对象上的属性会自动映射到标签身上
DOM的核心思想
把网页内容当做对象来处理
document对象
是DOM里提供一个对象
所以他提供的属性和方法都是用来访问和操作网页内容的
网页所有内容都在document里面
获取DOM元素
1. 根据css选择器来获取DOM元素
- 匹配第一个第一个元素
document.querySelector('css选择器')
参数：
- 包含一个或者多个有效的css选择器字符串
<div class="box">
<input name='xx'>
</div>
//选中了div里面的name属性为xx的input标签
let inputDom = document.querySelector("div.box input[name='xx']");
返回值:
- css选择器匹配的第一个元素，一个HTMLElement对象
<div>1</div>
<div>2</div>
<script>
let divDom = document.querySelector('div')
console.dir(divDom)
</script>
- 如果没有匹配到，则返回null
<script>
let divDom = document.querySelector('div')
console.dir(divDom)//null
</script>
- 用console.log打印出来的是标签，要想输出一个dom对象就用console.dir()
<div></div>
<script>
let divDom = document.querySelector('div')
console.log(divDom)
console.dir(divDom)
</script>
- 选择匹配的多个元素
document.querySelectorAll('css选择器')
参数：
- 包含一个或多个有效的css选择器字符串
返回值：
- css选择器匹配的所有符合的对象集合
```html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
let liDom = document.querySelectorAll('ul li')
console.dir(liDom)
```
- 1
-
特点：
- 得到的是一个伪数组
- 没有数组的pop(),push()等数组的方法
- 想要得到里面的每一个对象，则需要遍历的方式来获得
```js
let divs = document.querySelectorAll('divs')
console.dir(divs)
```
注意：哪怕只有一个元素，通过querySelectorAll()获取过来的也是一个伪数组，里面只有一个元素而已
2. 其他获取DOM元素方法（了解)
- 根据id获取一个元素
document.getElementById('id名')
- 根据标签取一类元素 获取页面所有的div
documentgetElementsByTagName('div')
- 根据类名获取元素 获取页面所有同类名的元素
document.getElementsByClassName('w')
设置/修改DOM元素内容
DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象。就是操作对象使用的点语法
- document.write()方法
- 只能将文本内容追加到前面的位置
- 文本包含标签会被解析
//永远只是追加操作，且只能位置</body>前
document.write('Hello World')
document.write('<h3>你好，js</h3>')
- 对象.innerText 属性
将文本内容添加/更新到任意表标签位置
将文本包含的标签不会被解析
<div class="box"></div>
let box = document.querySelector('.box')
box.innerText = '<h4>你好，世界</h4>'
- 对象.innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
<div class="box"></div>
let box = document.querySelector('.box')
box.innerHTML = '<h6>我的世界<br>有你真好</h6>'
设置/修改DOM元素属性
可以通过JS设置/修改标签元素属性。比如通过src更换 图片
可以通过JS设置/修改元素样式属性
- 设置/修改元素常用属性
语法:
对象.属性 = 值
代码示例：
<img src='' title='未定义图片'/>
//获取到img标签
let pic = document.querySelector('img')
//操作元素设置或者修改属性
pic.src = '图片路径'
pic.src = '这是一个图片'
- 设置修改元素样式属性
通过style属性操作css
语法:
对象.style.样式属性 = 值
注意:
- 修改样式通过style属性引出
- 如果属性有 - 连接符，需要转换为小驼峰命名法
- 赋值的时候，需要的时候不要忘记加css单位
<div class="box"></div>
let box = document.querySelector('.box')
//修改盒子的样式属性
box.style.backgroundColor = 'skyblue'
box.style.width = '300px'
box.style.height = '300px'
box.style.marginTop = '50px'
- 操作类名(className)操作css
如果修饰的样式比较多，直接通过style属性修改比较繁琐，我们可以借助类名的形式
语法：
元素.className = 'box'
注意：
- 由于class是关键字，所以要使用className去代替
- className是使用新的值换旧值，如果需要添加一个类，需要保留之前的类名
代码示例:
.box {
width: 100px;
height: 100px;
background-color: skyblue;
color: pink;
}
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
}
<div class="box">你好</div>
<script>
let div = document.querySelector("div")
//会替换掉已有的类名
div.className = 'box1'
//想要保存类名必须加上以前那个类
// div.className = 'box box1'
</script>
- 通过classList操作控制css
为了解决className容易覆盖以前的类名，可以通过classList方式追加和删除类名
语法：
追加一个类
//可以一次添加多个类
元素.classList.add('类名')
删除一个类
//可以同时删除多个类
元素.classList.remove('类名')
切换一个类
//如果本来有，那我就移除 ， 如果本来没有，那我就添加
元素.classList.toggle('类名')
- 设置/修改 表单元素 属性
- 获取
DOM对象.属性名
- 设置
DOM对象.属性名 = 新值
- 语法
表单.value='用户名'
表单.type = 'password'
....
定时器-间歇函数
- 定时器介绍
网页中经常会需要一种功能：每隔一段时间需要自动执行一行代码，不需要我们手动触发。就比如网页中的倒计时，要实现这种需求，需要定时器函数。其中一种就是间歇函数 - 定时器的使用
1.开启定时器
setInterval(函数,间隔函数)
