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