web APIs

一、DOM对象含义

DOM对象是浏览器根据html标签生成的JS对象
document对象是DOM提供的一个对象，网页的所有内容都在document中
如：document.write()

二、操作

1.获取元素

document.querySelector(‘CSS选择器’…)
返回匹配到的第一个元素，若没有匹配到，返回null
document.querySelectorAll(‘CSS选择器’…)
返回匹配到的对象集合，是一个伪数组（有索引和长度，没有方法）

2.操作内容

.innerText() 添加或更新文本内容，不解析标签
.innerHTML() 添加或更新文本内容，解析标签
注： innerHTML不能得到表单的内容，表单内容要用value获取

3.操作属性

（1）常用属性

对象.属性=值

例：

const pic=document.querySelector('img')
pic.img='./images/01.jpg'
pic.title='123'

（2）样式属性

对象.style.样式属性=值
注：若属性有-连接符，则需转换为小驼峰式命名法

例：

const box=document.querySelector('.box')
box.style.width='200px'
box.style.marginTop='15px'
box.style.backgroundColor='pink'

对象.className=’ ’
由于class是关键字，所以用className代替
！注：classsName是__新值换旧值__，如果需要添加一个类，需要保留之前的类名

对象.classList.add(‘类名’)
对象.classList.remove(‘类名’)
对象.classList.toggle(‘类名’) //toggle为切换（有则删除，没有则加上）

注： classList是追加与删除，不影响以前的类名

（3）表单元素属性

表单.value=‘用户名’
表单.type=‘password’

表单中添加就有效果，移除就没有效果
如：disabled，checked，selected

（4）自定义属性

自定义属性以data-开头，以dataset对象方式获取
例：

const box=document.quertSelector('.box')
console.log(box.dataset.id)

三、事件

1.事件监听

元素对象.addEventListener(‘事件类型’，要执行的函数)

2.事件类型

（1）鼠标事件
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
（2）焦点事件（表单获得光标）
focus 获得焦点
blur 失去焦点
（3）键盘事件
keydown 键盘按下触发
keyup 键盘抬起触发
（4）文本事件（表单）
input 用户输入文本事件

3.事件对象

事件对象有事件触发时的信息，比如鼠标点了哪个位置，点了什么元素
一般回调函数的第一个参数就是事件对象
元素.addEventListener(‘click’,fuction(e)){})
常见属性:

type 事件类型
clientX/clientY 获取光标相对浏览器可见窗口左上角的位置
offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
key 用户按下的键盘键的值

4.环境对象

环境对象指函数内部特殊的变量this，它代表当前函数运行时所处的环境
一般，谁调用this，this就是谁
直接调用this，this就指代window

四、事件流

1.事件捕获（了解）

概念： 从DOM的根元素开始去执行对应的事件（从外到里）
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
例：
document.addEventListener(‘click’,function(){alert(‘点击！’)},true)
注：第三个参数默认为false

2.事件冒泡

概念： 当一个元素的事件被触发时，同样的时间会在该元素的所有祖先元素中依次被触发
理解： 一个元素触发事件后，回一次向上调用所有父级元素的同名事件
事件冒泡默认存在（捕获机制为false）

3.阻止冒泡

__前提：__拿到事件对象
__语法：__事件对象.stopPropagation()
__含义：__阻止传播（阻止传播和冒泡）
例：

document.addEventListener('click',function(){
		alert('我是爷爷')
})
fa.addEventListener('click',function(){
		alert('我是爸爸')
})
son.adddEventlistener('click',function(e){
		alert('我是儿子')
})
e.stopPropagation()

4.解绑事件

（1）on事件——直接用null覆盖

btn.onclick=function(){
	alert('点击了')
}
btn.onclick=null

（2）addEventListener事件
注：匿名函数不能解绑

const btn=document.querySelector('button')
function fn(){
	alert('点击了')
}
btn.addEvnetListener('click',fn)
btn.removeEventLister('click',fn)

5.鼠标经过事件的区别

mouserover和mouseout有冒泡效果
mouseenter和mouseleave没有冒泡效果（推荐）

五、事件委托

__优点：__减少注册次数
__原理：__利用事件冒泡
给父元素注册事件，触发子元素时，会冒泡到父元素身上
实现：

const ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
	if(e.target.tagName==='LI'{
		e.target.style.color='red'
	}		
})

解释：
（1）点击ul中的li时，target即为li对象
（2）li对象的tagName为’LI’

阻止默认行为

如阻止链接的跳转，表单域跳转
语法 ： e.preventDefault()

六、其他事件

1.页面加载事件（用得少）——load,DOMContentLoaded

老代码喜欢把script写在head中，这时找不到dom元素
这时就要用页面加载事件：

//所有资源加载完才执行函数中内容
window.addEventListener('load',function(){

})
//初始HTML文档被完全加载和解析完成之后，再执行（无需等待样式表、图像等完全加载）
document.addEventListener('DOMContentLoaded',function(){

})

注：load不仅可以监听整个页面，也可以针对某个资源绑定

2.元素滚动事件（常用）——scroll

滚动条滚动时触发的事件
检测用户把页面滚动到某个区域后进行一些处理，如固定导航栏，返回顶部
语法：

//监听整个页面滚动（也可以监听其他对象）
window.addEventListener('scroll',fuunction(){

})

属性：

scrollLeft
scrollTop
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
两个元素都是__可读写__的
例：

//获取html页面滚动的距离（注：html获取方式为document.documentElement）
window.addEventListener('scroll',function(){
            console.log(document.documentElement.scrollTop)
        })

3.页面尺寸事件——resize

//在窗口尺寸改变时触发事件
window.addEventListener('resize',function(){

})

获取元素宽高：（不包括边框，margin，滚动条）
clientWidth
clientHeight

七、元素尺寸与位置

获取宽高：

包含元素自身设置的宽高、padding、border：
offsetWidth
offsetHeight

获取位置：

获取元素距离自己父级元素的左、上距离
offsetLeft
offsetTop
注：
（1）offsetWidth和offsetHeight是只读属性
（2）位置是以带有定位的父级元素为准，如果都没有则以文档左上角为准

八、日期对象

__日期对象__是用来表示时间的对象，可以得到当前系统时间

1.实例化——new

//获得当前时间
const date=new Date()
//获得指定时间
const date=new Date('2008-8-8 08:30:00')

2.日期对象方法

getFullYear() 获取年份（四位）
getMonth() 获取月份（取值为0-11，所以要+1）
getDate() 获取月份中的每一天（不同月份取值也不同）
getDay() 获取星期（取值为0-6）
getHours() 获取小时（取值为0-23）
getMinutes() 获取分钟（取值为0-59）
getSeconds() 获取秒（取值为-0-59）

toLocaleString() 结果形如2023/9/24/14:15:00
toLocaleDateString() 结果形如2023/9/24
toLocaleTimeString() 结果形如14:15:00

3.时间戳

使用场景： 如果计算倒计时结果，前面方法无法直接计算，需要借助时间戳完成
概念： 指1970年1月1日00时00分00秒起至现在的__毫秒数__，它是一种特殊的计量时间的方式
算法： 将来的时间戳-现在的时间戳=剩余时间毫秒数
获得时间戳：
（1）getTime()
（2）简写+new Date()
（3）使用Date.now()
注： 第三种只能得到当前的时间戳，而前两种可以返回指定时间的时间戳