web APIs

文章目录

  • 一、DOM对象含义
  • 二、操作
    • 1.获取元素
    • 2.操作内容
    • 3.操作属性
      • (1)常用属性
      • (2)样式属性
      • (3)表单元素属性
      • (4)自定义属性
  • 三、事件
    • 1.事件监听
    • 2.事件类型
    • 3.事件对象
    • 4.环境对象
  • 四、事件流
    • 1.事件捕获(了解)
    • 2.事件冒泡
    • 3.阻止冒泡
    • 4.解绑事件
    • 5.鼠标经过事件的区别
  • 五、事件委托
    • 阻止默认行为
  • 六、其他事件
    • 1.页面加载事件(用得少)——load,DOMContentLoaded
    • 2.元素滚动事件(常用)——scroll
    • 3.页面尺寸事件——resize
  • 七、元素尺寸与位置
    • 获取宽高:
    • 获取位置:
  • 八、日期对象
    • 1.实例化——new
    • 2.日期对象方法
    • 3.时间戳

一、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()
注: 第三种只能得到当前的时间戳,而前两种可以返回指定时间的时间戳

你可能感兴趣的:(前端,前端)