理论基础

什么是Web API?

作用和分类

使用JavaScript操作HTML和浏览器。

分为：DOM（文档对象模型）、BOM（浏览器对象模型）

DOM对象

使用JS获取到的标签是一个Object，即DOM对象。

什么是DOM?

DOM (Document Object Model）文档对象模型是用来呈现以及与任意 HTML 或 XML 文档交互的 API。即：DOM是浏览器提供的一套专门用来操作页面内容的功能。可以实现与用户的交互，如：下拉菜单，点击切换，页面特效等等。

什么是DOM树？（文档树）

将HTML文档以树状结构直观的表现出来。

image-20230702175542262

DOM树很直观的体现了标签与标签之间的关系！

什么是document？

document是DOM中的一个对象，且是最大的一个对象。

DOM

获取DOM元素的方法

前两个比较常用。

选择匹配的第一个元素

1
document.querySelector('css选择器')

注意需要加单引号‘’

选择匹配多个元素

1
document.querySelectorAll('css选择器')

NodeList

返回的值为数组（NodeList），这是一个伪数组，有长度和索引，但没有pop()，push()等数组方法，想要获取里面的对象，需要通过遍历（for）的方式。

其它方式获取元素

1
2
3
4
document.getElemenntById()
document.getElemenntByName()
document.getElemenntByTagName()
document.getElemenntByClassName()

修改DOM元素的内容

下文的element表示获取到的元素对象。

在</body>前追加文本

1
document.write('文本/标签')

write()

使用write()追加标签能够被浏览器解析。

更新元素中的文本

1
2
element.innerText = '文本'
element.innerHTML = '文本/标签'

innerText()

使用innerText()追加标签不能够被浏览器解析，而innerHTML可以被解析。

修改DOM元素的属性

修改常用属性

1
element.属性 = '属性值'

通过style控制样式

1
element.style.属性 = '属性值'

!!! note 关于属性的命名
将横线命名法改为小驼峰命名法，如：background-color改为backgroundColor。

设置class属性的值

由于class为关键字，要使用className替代

1
element.className = '属性值'

设置类名的覆盖问题

使用className设置类名会将以前的类名都覆盖掉。有3种方式可以解决，第一种，在属性值中保留以前类名的同时添加新类名，如：element.className = '旧类名 新类名'；第二种，使用+=赋值的方式，主要新类名前加个空格，element.className += ' 新类名'；第三中方式，使用classList操作类控制css，见下文。

使用classList设置类

1
2
3
element.classList.add('类名')
element.classList.remove('类名') 
element.classList.toggle('类名') //切换，即原来有的去掉，没有的添加。

定时器（间隙函数）

开启定时器

每间隔一段时间，自动执行一段代码。

1
setInterval(函数名不加小括号,间隙时间ms)

关闭定时器

1
2
let 变量名=setInterval(函数名,间隙时间)
clearInterval(变量名)

应用场景

当某些事件发生时，需要停止定时器，比如当用户鼠标放在轮播图上时。

事件

事件是指编程时系统内发生的动作或发生的事情。如：用户在网页上点击了一个按钮。

事件监听

让程序监听某个事件是否发生，发生后调用某个函数做出响应，也叫注册事件。

语法

1
element.addEventListener('事件',函数名,useCapture)

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

常见的事件

事件 描述
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载

resize事件

当窗口(window)发生变化时，触发的事件。

1
2
3
window.addEventListener('resize',function(){
    ...
})

补充一下this的使用

移除事件监听

传统的事件监听

1
2
3
4
btn.onclick=function(e){
    ....
};
btn.onclick=null;

使用EventListener

1
2
btn.addEventListener('事件',有名回调函数)
btn.removeEventListener('事件',有名回调函数)

节点关系

父子兄节点查询

image-20230712103816555

下文node表示当前节点

查找节点的父节点

1
node.parentNode

查找节点的子节点

1
node.children

查找下一个兄弟节点

1
node.nextElementSibling

查找前一个兄弟节点

1
node.previousElementSibling

节点关系

子节点往往有属性节点、文本节点、标签节点，注意不要忽略了某个节点！下文中的Element限制了只在标签节点中进行查找。更多见：节点的关系和内部操作。

节点增加

创建一个标签

1
let 子元素=document.createElement('标签名')

将标签放在某个位置

插入到父元素的最后一个子元素（追加）

1
父元素.appendChild(子元素)

插入到父元素的某个子元素前面

1
父元素.insertBefore(子元素,哪个子元素前面)

insertBefore

常常会用到父元素.children[i]的方式，来确定第二个参数的元素位置。

克隆节点

1
元素.cloneNode(布尔值)

布尔值为true，表示克隆时包含后代节点一起克隆；为false，不可龙后代节点。默认为false。

删除节点

从父元素中来删除！不存在父子关系删除失败。

1
父元素.removeChild(要删除的元素)

第二种方法元素.remove()

时间对象

1
2
3
let date=new Date() #返回当前时间
let date=new Date(’2023-7-1‘) #返回指定日期
let date=new Date(’2023-7-1 10:30:00‘) #返回指定日期

image-20230714103637902

时间戳

时间戳是指从1970年1月1日0时0分0秒到现在的时间差，换算成毫秒数。

获取时间戳的方法

三种方法

1
2
3
4
5
6
let date=new Date();
let time=date.getTime();

let time=+new Date();
#只能得到当前的
let time=Date.now();

时间戳转换

image-20230714110149696

注意要先换算出秒！即：总秒数=时间戳/1000

重绘和回流

浏览器是如何进行界面渲染的？

image-20230716114801549

  1. HTML解析器解析HTML生成DOM树

  2. CSS解析器解析CSS生成样式规则

  3. 根据DOM树和样式规则生成渲染树

  4. 进行布局Layout（重排/回流）：根据渲染树，得到节点的几何信息（位置和大小）

  5. 进行绘制Painting：根据计算和获取的信息对整个页面进行绘制

  6. Display：显示在页面上

回流

当Render Tree（渲染树）中部分或者全部元素的尺寸、结构、布局等发生变化时，浏览器就会重新渲染部分或全部文档的过程，称为回流。

重绘

由于节点（元素）的样式发生改变但不影响它在文档流中的位置和布局时，称为重绘。

重绘和回流

重绘不一定会引起回流，但回流一定会引起重绘。

事件对象

事件对象包含了事件触发时的信息。

1
2
3
元素.addEventListener('事件',function(e){
    ...
})

其中的e参数为事件对象。

常用属性

key

记录了用户按下的键盘值。

现在不提倡使用KeyCode。

type

获取当前的事件类型。如：‘click’，‘mouseenter’等

clientX/clientY

获取光标相对于浏览器可见窗左上角的位置。

offsetX/offsetY

获取光标相对于当前DOM元素左上角的位置。

preventDefault

阻止默认行为，比如：a标签的跳转行为，表单域的提交功能。

target

可以得到被点击的元素对象。

事件流

事件流是指事件完整执行过程中的流动路径。

事件捕获和事件冒泡

事件捕获

当一个元素的事件被触发，将从DOM的根元素开始执行事件。（从外到内）

1
DOM.addEventListener('事件',回调函数,是否开启捕获布尔值)

事件冒泡

当一个元素的事件被触发，将从被点击的元素开始，依次向上调用所有父级元素的同名事件。

阻止事件流动

关闭事件捕获和事件冒泡，让事件只在被点击的元素上发生。

1
事件对象.stopPropagation();
1
2
3
4
元素.addEventListener('事件',function(e){
    e.stopPropagation();
    ...
})

mouseover和mouseenter的区别

mouseover和mouseout默认具有冒泡效果

mouseenter和mouseleave不具有冒泡效果

在需要使用鼠标经过事件时，推荐使用mouseenter事件实现。

滚动事件和加载事件

滚动事件

监听整个页面或者某个元素的滚动事件。

1
2
3
4
5
6
window.addEventListener('scroll',function(){
    ...
})
元素.addEventListener('scroll',function(){
    ...
})

加载事件

load事件

常用于在加载完页面后再加载外部资源。也可以用在某个元素上，一般是需要花时间加载的元素比如图片。

1
2
3
4
5
6
window.addEventListener('load',function(){
    ...
})
元素..addEventListener('scroll',function(){
    ...
})

DOMContentLoaded事件

相对于load事件，无需等待样式表、图像完全加载。监听页面DOM树加载完毕。

监听对象为document。

1
2
3
document.addEventListener('DOMContentLoaded',function(){
    ...
})

scroll家族

获取内容的宽高等。

scrollWidth和scrollHeight属性

这两个属性返回的是元素内容的宽高，不带单位。

获取html标签

使用``document.documentElement.xxx的方式获取`。

scrollTop和scrollLeft属性

scrollTop表示的是头部被滚动的距离，即竖向滚动条移动的距离；类似的scrollLeft表示左边被滚动的距离。不带单位。

可以用于获取，也可以用于赋值以实现回到顶部/底部的功能。

1
2
3
4
let html=document.documentElement;
window.addEventListener('scroll',function(){
    console.log(html.scrollTop);
})

offset家族

获取元素的自身宽高，包含元素自身设置的宽高、padding、border。

1
2
3
4
5
6
7
8
//返回该元素自身的宽高，包含padding、border
元素.offsetWidth
元素.offsetHeight
//返回该元素的相对于父级元素的位置，没有父级元素以body为准
元素.offsetLeft
元素.offsetTop
//返回该元素的父级元素
元素.offsetParent

client家族

获取元素当前可见内容的宽高。

1
2
3
4
5
6
7
8
//返回该元素自身的宽高，不包含padding、border、滚动条
元素.clientWidth
元素.clientHeight
//返回元素左边框、上边框的大小
元素.clientLeft
元素.clientTop
//返回该元素的父级元素
元素.clientParent