一、DOM
const:里面存放的是地址,优先使用const声明变量,数组和对象的修改可以用const
1.DOM(文档对象模型)
是什么:用来呈现以及与任意HTML或XML文档交互的API(操作网页内容)
作用:开发网页内容特效和实现用户交互
2.DOM树
将 HTML文档以树状结构直观的表现出来,称为文档树或 DOM树
描述网页内容关系的名词
作用: 文档树直观的体现了标签与标签之间的关系
3.DOM对象
DOM对象:浏览器根据html标签生成的js对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
document: 是DOM提供的一个对象,网页中所有的内容都在document里面
获取DOM对象
通过CSS选择器
返回值:获取匹配第一个元素,没有匹配为null必须加引号,为字符串
可以直接修改
document.querySelector('css选择器')
<body>
<div class="box">123</div>
<div class="box">abc</div>
<p id="nav">导航栏</p>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
const box = document.querySelector('div') //选123
const nav = document.querySelector('#nav')
const li = document.querySelector('ul li:first-child')
</script>
</body>
获取所有元素
const lis = document.querySelectorAll('li')
获取的是伪数组:
- 有长度有索引号
- 没有pop() push()等方法
返回值:nodelist 对象集合
操作元素内容
1.对象.innerText 属性
- 将文本内容添加/更新到任意标签位置
- 显示纯文本,不解析标签
2.对象.innerHTML 属性
解析标签
<div class="box">我是文字内容</div>
box.innerHTML = '我要更换'
操作元素属性
二、事件
1.事件:是在编程时系统内发生的动作或者发生的事情
- 比如用户在网页上单击一个按钮
事件监听:就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个的数做出响应,
称为绑定事件或者注册事件比如鼠标经过显示下拉菜单
- 比如点击可以播放轮播图
语法
元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素
- 事件源: 那个dom元素被事件触发了,要获取dom元素
- 事件类型: 用什么方式触发,比如鼠标单击click、鼠标经过 mouseover等
- 事件调用的函数: 要做什么事
鼠标事件
- click 鼠标点击
- mouseenter 鼠标经过
- mouseleave 鼠标离开
焦点事件
分类:focus(获取焦点) blur(失去焦点)
区别:
当单击或使用Tab键切换到某个表单元素或超链接对象时,会触发focus事件。focus事件是确定页
面内鼠标当前定位的一种方式。在默认情况下,整个文档处于焦点状态,但是单击或者使用Tab键
可以改变焦点位置。
blur事件则与focus事件相反,当元素失去焦点时,会触发该事件。例如,当用户在输入框中输入完
成后,将焦点从输入框移开,此时就会触发blur事件。
键盘事件
const input = document.querySelector('input')
input.addEventListener('keydown',function(){
console.log('键盘按下了')
})
input.addEventListener('keyup', function(){
console.log('键盘弹起了')
})
文本事件
事件流
事件捕获:从DOM根元素开始去执行对应的事件(从外到里)
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
addEventListener第三个参数传入true 代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发,默认就是false
L0事件没有捕获,只有冒泡
const fa= document.querySelector('.father')
const son = document.queryselector('.son')
document.addEventListener('click', function(){
alert('我是爷爷')
},true)
fa.addEventListener('click',function(){
alert('我是爸爸')
},true)
son.addEventListener('click',function(){
alert('我是儿子')
},true)
事件冒泡:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件(从里到外)
阻止冒泡
因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素,若想把事件限制在当前元素
内,就需要阻止事件冒泡。
阻止事件冒泡需要拿到事件对象
事件对象.stopPropagation()
即能阻止冒泡又能阻止捕获,本质是阻止传播
son.addEventListener('click',function(e){
alert('我是儿子')
},true)
e.stopPropagation()
事件解绑
btn.onclick =function(){
alert('点击了')
}
btn.onclick = null
事件委托
事件委托是利用事件冒泡的特点,给父元素注册事件,当触发子元素的时,会冒泡到父元素身上,
从而触发父元素的事件
事件对象.target.tagName 可以获得真正触发事件的元素
优点:减少注册次数,提高程序性能
- 页面加载事件
加裁外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
事件名:load,监听页面所有资源加载完毕:
给window 添加 load 事件
不仅可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
window.addEventListener('load',function(){
//执行事件
})
页面滚动事件
escrollLeft和scrollTop(属性)
- 获取被卷去的大小
- 获取元素内容往左、往上浪出去看不到的距离
- 这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离