欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

【WEB APIs】

2026-02-04 分类：服务器技术 阅读(29) 评论(0)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

WEB API

  • 一.Web API基本认知
  • 二.获取DOM对象
    • 2.1 根据CSS选择器来获取DOM元素
  • 三.操作元素内容
  • 四.操作元素属性
    • 4.1 常用属性修改
    • 4.2 操作样式属性
      • 4.2.1 通过style操作css
      • 4.2.2 操作类名（className）操作css
      • 4.2.3通过classList操作类控制css
    • 4.3 操作表单元素属性
    • 4.4 自定义属性
    • 4.5 定时器-间歇函数
  • 五. 事件
    • 5.1 事件监听
      • 5.1.1 了解事件监听
      • 5.1.2 事件监听版本
    • 5.2. 事件类型
      • 5.2.1 鼠标事件
      • 5.2.2 焦点事件
      • 5.2.3 键盘事件
      • 5.2.4 文本事件
    • 5.3 事件对象
    • 5.4 环境对象
    • 5.5 回调函数
  • 六. 事件流
    • 6.1 事件捕获与事件冒泡
    • 6.4 阻止冒泡（阻止事件流）
    • 6.5解绑事件
    • 6.6 鼠标经过事件
  • 七.事件委托
    • 特殊-阻止元素默认行为
  • 八.其他事件
    • 8.1 页面加载事件
    • 8.2 元素滚动事件
    • 8.3 页面尺寸事件
  • 九.日期对象
    • 9.1 实例化
    • 9.2 时间对象方法
    • 9.3 时间戳
  • 十.节点操作
    • 10.1 DOM节点
    • 10.2 查找节点
    • 10.3 增加节点
      • 克隆节点
    • 10.4 删除节点
  • 十一.移动端事件
  • 十二.js插件

一.Web API基本认知

  • DOM（Document Object Model—— 文档对象模型） 作用：DOM 是浏览器提供的一套专门用来操作网页内容的功能，可以开发网页内容特效和实现用户交互

  • DOM树 作用：将 HTML 文档以树状结构直观的表现标签与标签之间的关系

  • DOM对象 浏览器根据 html 标签生成的 JS 对象，把网页内容当做对象来处理 所有的标签属性都可以在这个对象上面找到 修改这个对象的属性会自动映射到标签身上

  • document 是 DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的。eg. document.write () 网页所有内容都在 document 里面

二.获取DOM对象

2.1 根据CSS选择器来获取DOM元素

1.选择匹配的第一个元素

  • 语法：document.querySelector(‘css选择器’)
  • 参数：包含一个或多个有效的CSS选择器字符串
  • 返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象 （没有匹配到就返回null）
  • 可以直接进行修改样式操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class>1</div>
<div class="box"></div>

<p id="nav"></p>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
// 获取匹配到的第一个元素
const box =document.querySelector('div')
console.log(box);
const box1 =document.querySelector('.box')
console.log(box1);
// 获取第一个li
const li =document.querySelector('ul li:first-child')
console.log(li);

</script>
</body>
</html>

在这里插入图片描述 2.选择匹配的多个元素

  • 语法：document.querySelectorALL(‘css选择器’)
  • 参数：包含一个或多个有效的 CSS 选择器字符串
  • 返回值：CSS 选择器匹配的 NodeList 对象集合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
const lis=document.querySelectorAll('ul li')
console.log(lis);

</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
const lis=document.querySelectorAll('ul li')
for(let i=0;i<lis.length;i++ )
{
console.log(lis[i]);

}//依次打印出li
</script>
</body>
</html>

三.操作元素内容

  • 对象.innerText属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">我是文字内容</div>

<script>
//1.获取元素
const box=document.querySelector('box')
//修改文字内容
console.log(box.innerText);//获取文字内容
box.innerText='我是一个盒子' //修改
box.innerText='<strong>盒子</strong>'//不解析标签
</script>
</body>
</html>

  • 对象.innerHTML属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">我是文字内容</div>
<script>
const box=document.querySelector('box')
console.log(box);
box.innerHTML='<strong>盒子</strong>'//会解析标签
</script>
</body>
</html>

四.操作元素属性

4.1 常用属性修改

语法： 对象.属性=值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./屏幕截图 2026-01-15 165529.png" alt="">
<script>
//获取元素
const img=document.querySelector('img')
//修改属性
img.src="./2屏幕截图 2026-01-15 165529.png"
</script>
</body>
</html>

4.2 操作样式属性

4.2.1 通过style操作css

语法： 对象.style.样式属性=值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}

</style>
</head>
<body>
<div></div>
<script>
//获取元素
const div =document.querySelector('div')
//修改
div.style.width='1000px'//加单引号
div.style.backgroundColor='red'//小驼峰命名法
</script>
</body>
</html>

在这里插入图片描述

  • 案例-随机生成背景

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url(../背景/1.jpg) no-repeat top center/color;
}
</style>
</head>

<body>
<script>
function getNum(N, M) {
return Math.floor(Math.random() * (M – N + 1)) + N
}
const num = getNum(1, 16)
document.body.style.backgroundImage = `url(../背景/${num}.jpg)`
</script>
</body>

</html>

4.2.2 操作类名（className）操作css

语法： 元素.className=‘active’

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

div {
width: 200px;
height: 200px;
background-color: pink;
}
.box{
width: 500px;
height: 1000px;
background-color: red;
margin: 100px auto;
border:1px solid #000;
}
</style>
</head>
<body>
<div>
</div>
<script>
//获取元素
const div=document.querySelector('div')
//添加类名
div.className='box'
</script>
</body>
</html>

4.2.3通过classList操作类控制css

  • 通过classList追加和删除类名，不影响以前类名，为了解决className容易覆盖以前的类名 语法： 元素.classList.add(‘类名’) 元素.classList.remove(‘类名’) 元素.classList.toggle(‘类名’)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
.active{
color:red
}
</style>
</head>
<body>
<div class="box">
文字
</div>
<script>
//获取元素
const box=document.querySelector('.box')
//添加
box.classList.add('active')
//div.classList.remove('box') // 删除类 remove()
div.classList.toggle('active') //切换类 toggle() 有就删掉，没有就追加

</script>
</body>
</html>

4.3 操作表单元素属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="电脑">
<script>
//获取元素
const unname=document.querySelector('input')
//获取值
console.log(uname.value);
nuname.value='我要买电脑'//设置值

</script>
</body>
</html>

4.4 自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one=document.querySelector('div')
console.log(onr.dataset);//自定义集合
console.log(one.dataset.id);//1
console.log(one.dataset.spm);//不知道

</script>
</body>
</html>

4.5 定时器-间歇函数

语法： setInterval(函数，间隔时间)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// setInterval(函数，间隔时间)
// setInterval(function(){
// console.log('每隔一秒执行一次');

// },1000)
function fn(){
console.log('每隔一秒执行一次');

}
setInterval(fn,1000)
</script>
</body>
</html>

关闭计时器 let 变量名=setInterval(函数，间隔时间) clearInterval(变量名)

五. 事件

5.1 事件监听

5.1.1 了解事件监听

事件： 在编程时系统内发生的动作或者发生的事情，eg. 用户在网页上单击一个按钮

事件监听： 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定/注册事件。eg. 鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

事件监听三要素：

  • 事件源：那个dom元素被事件触发了，要获取dom元素
  • 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
  • 事件调用的函数：要做什么事

语法： 元素对象.addEventListener(‘事件类型’,执行函数）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
//点击按钮，弹出对话框
const btn=document.querySelector('button')
btn.addEventListener('click',function(){
alert('hi~')
})
</script>
</body>
</html>

5.1.2 事件监听版本

DOM L0( 事件源.on事件=function(){) DOM L2 事件源.addEventListener(事件，事件处理函数) 区别: on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
const btn=document.querySelector('button')
// L0
// ctn.onclick=function(){
// alert(11)
// }
// ctn.onclick=function(){
// alert(22)
// }
// L2
btn.addEventListener('click',function() {
alert('11')
})
btn.addEventListener('click',function() {
alert('22')
})
</script>
</body>
</html>

5.2. 事件类型

5.2.1 鼠标事件

代码类型
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
const div =document.querySelector('div')
//鼠标经过
div.addEventListener('mouseenter',function () {
alert('hi~')
})
//鼠标离开
div.addEventListener('mouseleave',function () {
alert('hi~')
})
</script>
</body>
</html>

5.2.2 焦点事件

代码类型
focus 获得焦点
blur 失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input=document.querySelector('input')
input.addEventListener('focus',function () {
console.log('有焦点触发');

})
input.addEventListener('blur',function () {
console.log('失去焦点触发');

})
</script>
</body>
</html>

5.2.3 键盘事件

代码类型
keydown 键盘按下触发
keyup 键盘抬起触发

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input=document.querySelector('input')
input.addEventListener('keydown',function () {
console.log('键盘按下');
})
input.addEventListener('keyup',function () {
console.log('键盘弹起了');
})
</script>
</body>
</html>

5.2.4 文本事件

表单输入触发：用户输入事件（input）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input=document.querySelector('input')
input.addEventListener('input',function () {
console.log('用户输入内容');
console.log(input.value);

})
</script>
</body>
</html>

5.3 事件对象

  • 定义：是一个包含事件触发时相关信息的对象，例如鼠标点击事件中，它会存储鼠标点击的位置信息。

  • 事件对象是前端交互逻辑中的重要概念，主要用于捕获和处理用户操作（如点击、按键）的细节信息，是实现动态页面交互的基础工具之一。

  • 在事件绑定的回调函数中，第一个参数即为事件对象。 事件对象通常被命名为event、ev 或 e（简洁易写）。

常用属性作用
type 获取当前触发的事件类型（如click、keydown等）
clientX/clientY 获取光标相对于浏览器可见窗口左上角的坐标位置
offsetX/offsetY 获取光标相对于当前触发事件的 DOM 元素左上角的坐标位置
key 获取用户按下的键盘按键对应的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
const btn=document.querySelector('button')
btn.addEventListener('click',function (e) {
console.log(e);

})
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
const input=document.querySelector('input')
input.addEventListener('keyup',function (e) {
if(e.key==='enter'){
console.log('我按下了回车');

}
})
</script>
</body>
</html>

5.4 环境对象

环境对象： 函数内部的特殊变量this，它的作用是代表当前函数运行时所处的上下文环境。 作用： 明确this的指向可简化代码逻辑，避免上下文混淆。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
function fn() {
console.log(this);

}
fn()
</script>
</body>
</html>

5.5 回调函数

定义： 当一个 函数A 被作为 参数 传递给另一个 函数B时，A函数就称为回调函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function showAlert() {
alert("Hello, world!");
}
setTimeout(showAlert, 3000);
//此种计时器就是一种回调函数
</script>
</body>
</html>

六. 事件流

事件流： 指事件完整执行过程中的流动路径，包含 2 个核心阶段（事件捕获与事件冒泡） 格式： DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制) 区别： true代表捕获阶段，false代表冒泡阶段 |阶段|流动方向|说明| |–|–|–| |捕获阶段|从父到子 （如 Document→html→body→div）|事件从最顶层的文档对象开始， 逐层向下传递到触发事件的目标元素| |冒泡阶段|从子到父 （如 div→body→html→Document）|事件从目标元素开始， 逐层向上传递回最顶层的文档对象|

6.1 事件捕获与事件冒泡

事件捕获:

  • 事件捕获是事件流的阶段之一，指事件从 DOM 的根元素（如Document）开始，从外到里逐层传递并执行对应事件的过程。
  • addEventListener当第三个参数传入true时，事件会在捕获阶段触发（实际开发中较少使用）

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<script>
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)
</script>
</div>
</body>
</html>

事件冒泡：

  • 事件冒泡当一个元素的事件被触发时，相同的事件会在该元素的所有祖先元素中依次触发。（元素触发事件后，会逐层向上调用所有父级元素的同名事件。）
  • false代表冒泡阶段触发（默认是false，可不写）
  • 实际工作中以事件冒泡为主

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<script>
const fa=document.querySelector('.father')
const son=document.querySelector('.son')
document.addEventListener('click',function () {
alert('这个是祖宗')
})
fa.addEventListener('click',function () {
alert('这个是爸爸')
})
son.addEventListener('click',function () {
alert('这个是儿子')
})
</script>
</div>
</body>
</html>

6.4 阻止冒泡（阻止事件流）

  • 事件冒泡默认存在，易导致事件影响父级元素；若需将事件限制在当前元素内，需阻止冒泡。
  • 前提：需先获取事件对象（事件回调函数的第一个参数）
  • 该方法不仅能阻止冒泡阶段的事件传播，也能阻断捕获阶段的事件流动。
  • 控制事件作用范围的常用手段，可避免不必要的事件连锁触发 语法： 事件对象.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<script>
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 (e) {
alert('这个是儿子')
//阻止冒泡
e.stopPropagation()
}, true)
// 事件对象.stopPropagation()
</script>
</div>
</body>
</html>

6.5解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
const btn=document.querySelector('button')
btn.onclick=function(){
alert("点击了")
}
// 1.L0事件解绑
btn.onclick=null
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
const btn=document.querySelector('button')
function fn() {
alert('点击了')
}
btn.addEventListener('click',fn)
// 1.L2事件解绑
btn.removeEventListener('click',fn)
</script>
</body>
</html>

6.6 鼠标经过事件

  • mouseover和mouseout有冒泡事件
  • mouseenter和mouseleave没有冒泡事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fa {
height: 400px;
width: 400px;
background-color: pink;
}
.son {
height: 200px;
width: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
<script>
const fa = document.querySelector('.fa')
const son = document.querySelector('.son')

// mouseover和mouseout有冒泡事件
// fa.addEventListener('mouseover', function () {
// console.log('经过')
// })
// fa.addEventListener('mouseout', function () {
// console.log('离开')
// })
// mouseenter和mouseleave没有冒泡事件
fa.addEventListener('mouseenter', function () {
console.log('经过')
})
fa.addEventListener('mouseleave', function () {
console.log('离开')
})
</script>
</body>

</html>

七.事件委托

  • 事件委托：利用事件流特性实现的开发技巧，通过给父元素注册事件，借助事件冒泡的特点，触发子元素时会冒泡到父元素，从而执行父元素的事件逻辑。
  • 优点：减少事件注册次数，降低内存占用，提升程序性能（无需给每个子元素单独绑定事件）
  • 真正的触发元素：事件对象.target.tagName

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<p>不要颜色</p>
</ul>
<script>
// 点击每li，当前li比变红
const ul=document.querySelector('ul')
ul.addEventListener('click',function (e) {
// this.style.color='red'全变红
// e.target.style.color='red'点击无论哪个都变红
if(e.target.tagName==='Li'){
e.target.style.color='red'
}

})
</script>
</body>
</html>

特殊-阻止元素默认行为

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="https://blog.csdn.net/2501_94474893?spm=1018.2226.3001.5343">
<input type="submit" value="免费注册">
</form>
<script>
const form=document.querySelector('form')
form.addEventListener('submit', function(e){
e.preventDefault()
})
</script>
</body>

</html>

八.其他事件

8.1 页面加载事件

事件名：load

  • 加载外部资源（如图片、外联 CSS 和 JavaScript 等）加载完毕时触发的事件
  • 监听页面所有资源加载完毕：给 window 添加 load 事件
  • 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
  • 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定 load 事件

事件名：DOMContentLoaded

  • 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
  • 监听页面 DOM 加载完毕：给 document 添加 DOMContentLoaded 事件

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// load 等待所有资源加载完毕再去执行回调函数
// window.addEventListener('load', function () {
// const btn = document.querySelector('button')
// btn.addEventListener('click', function () {
// alert(11)
// })
// })
// img.addEventListener('load', function () {
// // 等待图片加载完毕，再去执行里面的代码
// })

// DOMContentLoaded 不等待（如图片、CSS 可以还在加载）
window.addEventListener('DOMContentLoaded',function () {
const btn = document.querySelector('button')
btn.addEventListener('click',function () {
alert(11)
})
})
</script>
</head>

<body>
<button>点击</button>
</body>

</html>

8.2 元素滚动事件

事件名：scroll

  • 滚动条在滚动的时候持续触发的事件
  • 作用：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
  • 监听某个元素的内部滚动直接给某个元素加scroll
  • 使用scroll来检测滚动的距离

获取位置作用：scrollLeft 和 scrollTop

  • 获取被卷去的大小
  • 获取元素内容往左、往上滚出去看不到的距离
  • 特性：这两个值是可读写的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding-top: 100px;
height: 3000px;
}
div {
display: none;
margin: 100px;
overflow: scroll;
width: 200px;
height: 200px;
border: 2px solid pink;
}
</style>
</head>
<body>
<div>
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
我里面有很多文字
</div>
<script>
// 页面滚动事件
// window.addEventListener('scroll', function () {
// console.log('我滚了')// 执行的操作
// })

// 指定元素（范围）
// const div = document.querySelector('div')
// div.addEventListener('scroll', function () {
// console.log(div.scrollTop) // 被卷去的头部
// })
document.documentElement.scrollTop = 800
const div = document.querySelector('div')
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop
console.log(div.scrollTop)
if (n >= 100) {
div.style.display = 'block'
}
})
</script>
</body>

</html>

8.3 页面尺寸事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<SCript>
const div=document.querySelector('div')
//检查盒子的高
console.log(div.clientHeight);
//检查盒子的宽度
console.log(div.clientWidth);
window.addEventListener('resize',function(){
console.log(1);

})
</SCript>
</body>
</html>

九.日期对象

9.1 实例化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//实例化
//1.得到当前时间
const date= new Date()
console.log(date);
//2.指定时间
const date1=new Date('2026-1-30')
console.log(date1);

</script>
</body>
</html>

9.2 时间对象方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//获得日期对象
const date= new Date()
//使用
console.log(date.getFullYear());//年
console.log(date.getHours());//小时
console.log(date.getMinutes());//
console.log(date.getDay());//星期几
console.log(date.getMonth());
console.log(date.getSeconds());//秒

</script>
</body>
</html>

9.3 时间戳

**定义 ：**以 1970 年 01 月 01 日 00 时 00 分 00 秒为起始点， 到当前时刻的毫秒数，是标准化的时间计量方式。 倒计时算法 1.计算：将来时间戳 – 当前时间戳 = 剩余时间毫秒数 2.转换：将剩余毫秒数换算为 “年月日时分秒”，即得到倒计时时间。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//获得时间戳
//1.getTime
const date =new Date()
console.log(date.getTime);
//2.+new Date
console.log(+new Date());
//3.Date.now()
console.log(date.now());//只能获得当前的时间戳

console.log('————————');
//2.+new Date
console.log(+new Date('2025-1-31'));//指定时间

</script>
</body>
</html>

十.节点操作

10.1 DOM节点

DOM树里每一个内容都称之为节点 节点关系：针对的找亲戚返回都是对象（父节点/子节点/兄弟节点）

元素节点：

所有的标签 比如body、div html是根节点 属性节点

所有的属性 比如href、id、class、content 文本节点

10.2 查找节点

父节点 parentNode属性 返回最近一级的父节点 找不到返回Null 语法： 子元素.parentNode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="yeye">
<div class="dad">
<div class="baby"></div>
</div>
</div>
<script>
//父节点
const bady=document.querySelector('bady')
console.log(bady);
console.log(bady.parentNode);//返回父级
console.log(bady.parentNode.parentNode);//返回yeye

</script>
</body>
</html>

子节点

  • childNodes获取所有子节点，含文本节点（空格、换行）、注释节点等
  • children仅获取元素类型的子节点，返回的还是一个伪数组

<script>
const parent = document.querySelector('.parent');
// 父元素.childNodes
const allChildNodes = parent.childNodes;//获得所有节点
// 父元素.children（常用）
const elementChildren = parent.children;//只获得元素节点
// 访问第1个子元素
const firstChild = parent.children[0];
</script>

兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const li2=document.querySelector('ul li:nth-child(2)')
console.log(li2.nextElementSibling);//下一个兄弟
console.log(li2.previousElementSibling);//上一个兄弟

</script>
</body>
</html>

10.3 增加节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul></ul>
<script>
// const div=document.createElement('div')
// console.log(div);//创造节点
// //追加节点
// document.body.appendChild(div)
//1.追加li到ul中
//创造节点
const ul=document.querySelector('ul')
const li=document.activeElement('li')
//追加最后
ul.appendChild(li)
//放到某个位置
ul.insertBefore(il,ul.children[0])//放到最前面

</script>
</body>
</html>

克隆节点

作用： 克隆出与原标签一致的元素，将其放入到指定的元素内部

括号内的布尔值控制克隆范围：

  • 若为true：克隆时包含后代节点（深度克隆）
  • 若为false（默认）：克隆时不包含后代节点（仅克隆当前元素）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//克隆节点
const ul=document.querySelector('ul')
//克隆 元素.cloneNode(true)
ul.children[0].cloneNode(true)
ul.children[2].cloneNode(false)

</script>
</body>
</html>

10.4 删除节点

  • 当节点在页面中不再需要时，可执行删除操作
  • JavaScript 原生 DOM 操作中，删除元素必须通过父元素来执行
  • 若待删除元素与父元素不存在父子关系，删除操作会失败

语法： 父元素.removechild(要删除的元素)

删除节点与隐藏节点（display:none）的区别：

  • 隐藏节点仍存在于 HTML 结构中，仅视觉上不可见
  • 删除节点是从 HTML 结构中彻底移除该节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 父元素.removechild(要删除的元素)
const ul = document.querySelector('ul')
ul.removeChild(ul.children[0])

</script>
</body>
</html>

十一.移动端事件

移动端有独特的触屏事件（touch，也称触摸事件），Android 和 iOS 均支持。touch对象代表一个触摸点（可以是手指或触控笔），响应用户对屏幕 / 触控板的操作。

<script>
const div = document.querySelector('div')
// 1. 触摸
div.addEventListener('touchstart', function () {
console.log('手指 触摸 到一个 DOM 元素时触发')
})
// 2. 离开
div.addEventListener('touchend', function () {
console.log('离开了')
})
// 3. 移动
div.addEventListener('touchmove', function () {
console.log('移动')
})
</script>

十二.js插件

**定义：**插件是他人编写好的代码，复制对应代码即可直接实现相应效果 Swiper 插件官网地址 注意事项：多个 Swiper 同时使用时，需区分类名

赞(0)
未经允许不得转载：171主机测评 » 【WEB APIs】
分享到： 更多 (0)
标签：

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

热门标签

#人工智能(59260)#python(20099)#开发语言(16856)#java(15462)#运维(15354)#linux(14944)#大数据(14573)#服务器(13061)#算法(11775)#前端(10902)#网络(9370)#ai(8911)#数据库(8895)#c++(8171)#课程设计(6801)#学习(6767)#机器学习(6709)#区块链(5918)#OpenClaw(5388)#后端(5150)#spring boot(5004)#深度学习(4947)#c语言(4375)#毕业设计(4293)#数据结构(4195)#安全(4059)#docker(3929)#架构(3851)#javascript(3807)#大模型(3649)

热门文章

最新文章

归档

分类