JavaScript(进阶篇）

登录 · 发表于 2026-1-26 03:19:05

🌏个人博客主页：心.c

媒介：本日解说的是JavaScript进阶，盼望各人可以有所劳绩，话不多说，开干！
🔥🔥🔥文章专题：JavaScript
😽感谢各人的点赞👍收藏⭐️批评✍您的一键三连是我更新的动力 💓

目次
DOM：
概念：
DOM 树(由节点构成的条理结构)
获取dom节点：
为dom节点添加删除切换class类：
定时器：
事故：
1. 鼠标事故
2. 键盘事故
3. 表单事故
键盘监听事故事例：
事故流：
事故流的三个阶段
capture参数：
事故解绑：
冒泡的利益：
克制表单默认提交活动：
页面尺寸事故：
日期对象：
时间戳：
BOM:
location对象：
history对象：
localStorage对象：

DOM：

概念：

DOM（文档对象模子）是一种编程接口，用于HTML和XML文档。它为文档提供了一种结构化的表现，并界说了怎样通过脚本语言（如JavaScript）来访问和利用文档的内容，DOM 把文档视为树形结构（树结构），此中每个节点代表文档的一部分，比方元素、属性或文本。这些节点可以被创建、读取、更新或删除，从而实现对文档内容的动态控制
DOM 树(由节点构成的条理结构)

节点：

元素节点：代表文档中的HTML或XML元素，如 <div>、<p> 等。
属性节点：代表元素的属性，如 id、class 等。
文本节点：代表元素中的文本内容。
表明节点：代表文档中的表明 / /。
文档节点：代表整个文档。

获取dom节点：

1.获取id名的dom节点：

<body>
<div id="my_div"></div>
<script>
// 1. 获取具有特定ID的元素
const divById = document.getElementById("my_div");
const divById_ = document.querySelector('#div');
console.log(divById); // 输出 <div id="my_div"></div>
console.log(divById_); // 输出 <div id="my_div"></div>
// 使用dom元素添加一些样式来突出显示这些元素
divById.style.backgroundColor = "yellow";
</script>
</body>

复制代码

2.获取class类名的dom节点:

<body>
<div class="div"></div>
<script>
// 2. 获取具有特定类名的元素
const divsByClass = document.getElementsByClassName("div");
const divsByClass_ = document.querySelector('.div');
//获取所有类名为div的元素
const divsByClass_ = document.querySelectorAll('.div');
console.log(divsByClass); // 输出 HTMLCollection[<div class="div"></div>]
console.log(divsByClass_); // 输出 HTMLCollection[<div class="div"></div>]
// 使用dom元素添加一些样式来突出显示这些元素
divsByClass[0].style.backgroundColor = "lightblue";
</script>
</body>

复制代码

3.得到data-*为名的节点：
data-*为自界说属性

<div data-id="1" data-spm="bzd"></div>
<div data-id="2"></div>

复制代码

<script>
const one = document.querySelector('div')
console.log(one.dataset.id) //1
console.log(one.dataset.spm) //bzd
</script>

复制代码

data-* 属性的定名规则如下：

前缀必须是 data-：这是固定的，不能更改。
之后的部分必须由字母、数字、连字符（-）构成：不能包罗空格或其他特殊字符。
不能以数字开头：这是由于HTML属性名称不能以数字开始。

<body>
<div data-id="1"></div>
<script>
// 3. 获取具有特定属性值的元素
const divByDataId = document.querySelector("[data-id='1']");
console.log(divByDataId); // 输出 <div data-id="1"></div>
// 获取所有具有data-id属性的元素
const divsByDataId = document.querySelectorAll("[data-id='1']");
console.log(divsByDataId); // 输出 NodeList[<div data-id="1"></div>]
// 使用dom元素添加一些样式来突出显示这些元素
divByDataId.style.backgroundColor = "pink";
</script>
</body>

复制代码

为dom节点添加删除切换class类：

HTML样式：
添加一个类名为box的div节点

<div class="box">文化</div>

复制代码

CSS样式：
给box添加CSS样式，而且再添加一个类名为active的css样式

.box {
width: 200px;
height: 200px;
color: #333;
}
.active {
color: red;
background-color: pink;
}

复制代码

JavaScript样式：
通过classList可以为div节点添加active类（（classname)也可以给div添加类名，但是大概会有覆盖前面的类名，照旧用classList举行添加更安全）

<script>
//通过classlist 添加
const box = document.querySelector('.box')
//类型不加点
box.classList.add('active')
//删除类
box.classList.remove('active');
//切换类，有就加上，没有就删掉
box.classList.toggle('active');
</script>

复制代码

定时器：

耽误函数：
setTimeout为定时器耽误函数，可以到达某个时间后实验内里的函数

function greet() {
console.log("Hello, world!");
}
// 5000 毫秒（5 秒）后执行 greet 函数
setTimeout(greet, 5000);

复制代码

取消定时器函数clearTimeout()

// 设置定时器延迟函数
const timeoutId = setTimeout(sayHi, 3000);
// 取消定时器
clearTimeout(timeoutId);

复制代码

事故监听：

下面给各人保举几个常用的事故，假如有其他必要可以再举行查询
  事故：

1. 鼠标事故

   鼠标颠末事故：
    mouseover和mouseout会有冒泡结果
    mouseenter和mouseleave没有冒泡结果（保举）

click: 当用户点击元素时触发。
dblclick: 当用户双击元素时触发。
mousedown: 当用户按下鼠标按钮时触发。
mouseup: 当用户开释鼠标按钮时触发。
mousemove: 当用户移动鼠标时触发。
mouseover: 当鼠标指针移动到元素上方时触发。
mouseout: 当鼠标指针移出元素时触发.
mouseenter: 当鼠标指针进入元素时触发（不冒泡）。
mouseleave: 当鼠标指针脱离元素时触发（不冒泡）。

2. 键盘事故

keydown: 当用户按下键盘上的键时触发。
keyup: 当用户开释键盘上的键时触发。
keypress: 当用户按下键盘上的字符键时触发（不保举利用，已被弃用）。

JavaScript 事故监听器可以用于处理处罚各种用户交互和体系事故。以下是一些常见的事故范例及其用途：
3. 表单事故

submit: 当表单被提交时触发。
change: 当表单控件的值发生厘革时触发。
input: 当用户输入数据时触发。
focus: 当元素得到核心时触发。
blur: 当元素失去核心时触发。
select: 当用户选中文本（比方在 <input> 或 <textarea> 中）时触发。

键盘监听事故事例：

<input type="text" name="" id="">

复制代码

当向input输入框中输入字体按下和弹起键盘时会触发该事故

const input = document.querySelector('[type=text]')
//键盘事件
input.addEventListener('keydown', function () {
console.log('按下')
})
input.addEventListener('keyup', function () {
console.log('弹起')
})

复制代码

事故流：

事故流（Event Flow）是指欣赏器在处理处罚事故时的过程。
事故流紧张有三种阶段：捕获阶段、目的阶段和冒泡阶段。
事故流的三个阶段

1.捕获阶段

发生时间：事故从 document 对象开始流传，逐层向下，直到目的元素（事故的现实目的）。
过程：从最外层的 document 级别开始，徐徐向下转达到目的元素的父元素、先人元素，直到目的元素的事故处理处罚步伐开始吸收事故。
用途：这个阶段很少被利用，但可以用来拦截事故或举行预处理处罚。

2.目的阶段

发生时间：事故到达目的元素时。
过程：事故在目的元素上触发，并在目的元素上实验相应的事故处理处罚步伐。
用途：这个阶段用于处理处罚事故的现实目的元素上的处理处罚步伐。

3.冒泡阶段

发生时间：事故从目的元素开始向上冒泡，颠末每一个父元素，终极到达 document 对象。
过程：事故在目的元素上处理处罚完后，事故会从目的元素逐级向上转达到 document 对象。每个父元素的事故处理处罚步伐都有机会处理处罚这个事故。
用途：这个阶段非常有效，尤其是在事故署理和处理处罚多个相似事故时。

capture参数：

在 addEventListener方法中，true作为第三个参数用于指定事故处理处罚步伐的事故流阶段。这个参数称为 capture（捕获）或 useCapture。
capture参数：

true：表现事故处理处罚步伐将会在事故的 捕获阶段 实验。
false（默认值）：表现事故处理处罚步伐将在事故的 冒泡阶段 实验。

默认capture为false
点击下面事故会先弹出父级，再弹出子级，假如讲capture参数删除，那么就先冒出子级，再，弹出父级

<div class="father">
<div class="son"></div>
</div>

复制代码

const father = document.querySelector('.father')
const son = document.querySelector('.son')
father.addEventListener('click', function () {
alert('我是爸爸')
}, true)
son.addEventListener('click', function (e) {
alert('我是儿子')
}, true)

复制代码

克制冒泡：

//阻止冒泡
e.stopPropagation()

复制代码

事故解绑：

const button = document.querySelector('button')
button.onclick = function () {
alert('点击了')
}
// 解绑方式一
button.onclick = null
//解绑方式二 (匿名函数无法被解绑)
function fu() {
alert('点击了')
}
button.addEventListener('click', fu)
button.removeEventListener('click', fu)

复制代码

冒泡的利益：

当我们点击子元素时，会冒泡到父级元素上，从而触发父元素的事故
点击第几个li，li通过冒泡上升到父级，然后父级监听到被点击的子元素字体变红

<ul>
<li>我是第一个孩子</li>
<li>我是第二个孩子</li>
<li>我是第三个孩子</li>
<li>我是第四个孩子</li>
<li>我是第五个孩子</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
e.target.style.color = 'red'
})

复制代码

克制表单默认提交活动：

默认活动通常是向服务器发送表单数据并重新加载页面。通过克制默认活动，可以防止这种情况发生，从而使表单在提交时不会革新页面。

const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
//阻止默认行为
e.preventDefault()
})

复制代码

页面尺寸事故：

scrollLeft 和 scrollTop:

const element = document.querySelector('.scrollable');
console.log(element.scrollLeft); // 获取当前水平滚动位置
element.scrollLeft = 100; // 设置水平滚动位置为100像素
element.scrollTop = 100; // 设置垂直滚动位置为100像素

复制代码

offsetLeft 和 offsetTop:
用于获取元素相对于其近来的已定位先人元素的偏移量（左上角）

const element = document.querySelector('.box');
console.log(element.offsetLeft); // 获取元素的左边距
console.log(element.offsetTop); // 获取元素的上边距

复制代码

clientWidth 和 clientHeight:
用于获取元素的视口尺寸，不包罗滚动条、边框或外边距。它们表现元素的可视地域的宽度和高度

const element = document.querySelector('.box');
console.log(element.clientWidth); // 获取元素的可视宽度
console.log(element.clientHeight); // 获取元素的可视高度

复制代码

offsetWidth 和 offsetHeight:
用于获取元素的现实宽度和高度，包罗元素的边框和内边距，但不包罗外边距。

const element = document.querySelector('.box');
console.log(element.offsetWidth); // 获取元素的总宽度
console.log(element.offsetHeight); // 获取元素的总高度

复制代码

日期对象：

获恰当前日期方法：

const date = new Date()
console.log(date)
console.log(date.getFullYear())
console.log(date.getMonth() + 1)
console.log(date.getDate())
console.log(date.getDay())

复制代码

时间戳：

时间戳通常指的是从1970年1月1日00:00:00 UTC（调和天下时）开始所颠末的毫秒数。这种时间戳被称为Unix时间戳或Epoch时间戳。JavaScript的Date对象提供了天生和利用时间戳的方法

//第一种获得时间戳方法（只能获得当前时间戳）
let time = Date.now()
console.log(time)
//第二种可以获得指定时间的时间戳
console.log(+new Date())
//第三种可以获得指定时间的时间戳
const date = new Date()
console.log(date.getTime())

复制代码

BOM:

BOM（Browser Object Model，欣赏器对象模子）是一组与欣赏器窗口交互的对象聚集。BOM 紧张包罗了window，location，history，navigator等对象，它们提供了与欣赏器窗口、汗青记录、用户署理信息等交互的本领。
定时器函数：

setInterval()为定时器函数，每隔一段时间实验一次内里的函数

function sayHello() {
console.log("Hello, world!");
}
// 每隔 2000 毫秒（2 秒）执行一次 sayHello 函数
setInterval(sayHello, 2000);

复制代码

取消定时器 clearInterval（）函数

// 设置定时器，每隔 1000 毫秒（1 秒）执行一次
const intervalId = setInterval(sayHi, 1000);
// 取消定时器（例如：5 秒后停止）
setTimeout(() => {
clearInterval(intervalId);
}, 5000);

复制代码

location对象：

location.href实现页面跳转

<a href="https://www.jd.com/error2.aspx">支付成功<span>5</span>跳转</a>

复制代码

let i = 5
let timer = setInterval(function () {
document.querySelector('span').innerHTML = i
i--
if (i === 0) {
clearInterval(timer)
//5秒之后实现跳转
location.href = 'https://www.jd.com/error2.aspx'
}
}, 1000)

复制代码

location.reload实现页面更新

const reload = document.querySelector('button')
reload.addEventListener('click', function () {
location.reload()
})

复制代码

history对象：

history.forward页面的进步和退却功能

<button>退</button>
<button>进</button>

复制代码

const back = document.querySelector('button:first-child')
const forword = back.nextElementSibling
back.addEventListener('click', function () {
history.back()
})
forword.addEventListener('click', function () {
history.forward()
})

复制代码

localStorage对象：

通过localStorage对象可以将信息存到本地，纵然当页面关闭时也存在，除非主动删除

//添加键值对
localStorage.setItem('test', 'dom')

复制代码

得到本地信息内容：

// 获取键值对
const value = localStorage.getItem('test');
console.log(value); // 输出 "dom"

复制代码

到这里就解说完了，感谢各人的观看！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

JavaScript(进阶篇）

本帖子中包含更多资源

曂沅仴駦