【WEB APIs】
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
WEB API
一.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）
- 可以直接进行修改样式操作
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass>1</div><divclass="box"></div><pid="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);// 获取第一个liconst li =document.querySelector('ul li:first-child') console.log(li);</script></body></html>
2.选择匹配的多个元素
- 语法：document.querySelectorALL(‘css选择器’)
- 参数：包含一个或多个有效的 CSS 选择器字符串
- 返回值：CSS 选择器匹配的 NodeList 对象集合
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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>
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="box">我是文字内容</div><script>//1.获取元素const box=document.querySelector('box')//修改文字内容 console.log(box.innerText);//获取文字内容 box.innerText='我是一个盒子'//修改 box.innerText='<strong>盒子</strong>'//不解析标签</script></body></html>- 对象.innerHTML属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="box">我是文字内容</div><script>const box=document.querySelector('box') console.log(box); box.innerHTML='<strong>盒子</strong>'//会解析标签</script></body></html>四.操作元素属性
4.1 常用属性修改
语法： 对象.属性=值
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><imgsrc="./屏幕截图 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.样式属性=值
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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>
- 案例-随机生成背景
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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>functiongetNum(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’
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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(‘类名’)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="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 操作表单元素属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputtype="text"value="电脑"><script>//获取元素const unname=document.querySelector('input')//获取值 console.log(uname.value); nuname.value='我要买电脑'//设置值</script></body></html>4.4 自定义属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divdata-id="1"data-spm="不知道">1</div><divdata-id="2">2</div><divdata-id="3">3</div><divdata-id="4">4</div><divdata-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(函数，间隔时间)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>// setInterval(函数，间隔时间)// setInterval(function(){// console.log('每隔一秒执行一次');// },1000)functionfn(){ console.log('每隔一秒执行一次');}setInterval(fn,1000)</script></body></html>关闭计时器
let 变量名=setInterval(函数，间隔时间)
clearInterval(变量名)
五. 事件
5.1 事件监听
5.1.1 了解事件监听
事件： 在编程时系统内发生的动作或者发生的事情，eg. 用户在网页上单击一个按钮
事件监听： 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定/注册事件。eg. 鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
事件监听三要素：
- 事件源：那个dom元素被事件触发了，要获取dom元素
- 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数：要做什么事
语法：
元素对象.addEventListener(‘事件类型’,执行函数）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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方式可绑定多次，拥有事件更多特性，推荐使用
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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 | 鼠标离开 |
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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 | 失去焦点 |
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputtype="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 | 键盘抬起触发 |
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputtype="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）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputtype="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 | 获取用户按下的键盘按键对应的值 |
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><inputtype="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的指向可简化代码逻辑，避免上下文混淆。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><button>点击</button><script>functionfn(){ console.log(this);}fn()</script></body></html>5.5 回调函数
定义： 当一个 函数A 被作为 参数 传递给另一个 函数B时，A函数就称为回调函数
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>functionshowAlert(){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 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="father"><divclass="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，可不写）
- 实际工作中以事件冒泡为主
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="father"><divclass="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()
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="father"><divclass="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解绑事件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><button>点击</button><script>const btn=document.querySelector('button')functionfn(){alert('点击了')} btn.addEventListener('click',fn)// 1.L2事件解绑 btn.removeEventListener('click',fn)</script></body></html>6.6 鼠标经过事件
- mouseover和mouseout有冒泡事件
- mouseenter和mouseleave没有冒泡事件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="fa"><divclass="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
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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>特殊-阻止元素默认行为
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><formaction="https://blog.ZEEKLOG.net/2501_94474893?spm=1018.2226.3001.5343"><inputtype="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 事件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 特性：这两个值是可读写的
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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 =800const 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 页面尺寸事件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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 实例化
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>//实例化//1.得到当前时间const date=newDate() console.log(date);//2.指定时间const date1=newDate('2026-1-30') console.log(date1);</script></body></html>9.2 时间对象方法
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>//获得日期对象const date=newDate()//使用 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.转换：将剩余毫秒数换算为 “年月日时分秒”，即得到倒计时时间。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>//获得时间戳//1.getTimeconst date =newDate() console.log(date.getTime);//2.+new Date console.log(+newDate());//3.Date.now() console.log(date.now());//只能获得当前的时间戳 console.log('------------------------');//2.+new Date console.log(+newDate('2025-1-31'));//指定时间</script></body></html>十.节点操作
10.1 DOM节点
DOM树里每一个内容都称之为节点
节点关系：针对的找亲戚返回都是对象（父节点/子节点/兄弟节点）
元素节点：
所有的标签 比如body、div
html是根节点
属性节点
所有的属性 比如href、id、class、content
文本节点
10.2 查找节点
父节点
parentNode属性
返回最近一级的父节点 找不到返回Null
语法： 子元素.parentNode
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divclass="yeye"><divclass="dad"><divclass="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');// 父元素.childNodesconst allChildNodes = parent.childNodes;//获得所有节点// 父元素.children（常用）const elementChildren = parent.children;//只获得元素节点// 访问第1个子元素const firstChild = parent.children[0];</script>兄弟节点
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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 增加节点
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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（默认）：克隆时不包含后代节点（仅克隆当前元素）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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 结构中彻底移除该节点
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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 同时使用时，需区分类名
