本文系统讲解了 JavaScript 进阶知识，涵盖 DOM 操作（节点获取、类名管理）、定时器使用、事件系统（鼠标、键盘、表单事件、事件流、冒泡与捕获）、BOM 对象（location、history、localStorage）以及日期对象的使用。通过代码示例演示了如何动态控制页面元素和处理用户交互。
DOM（文档对象模型）是一种编程接口，用于 HTML 和 XML 文档。它为文档提供了一种结构化的表示，并定义了如何通过脚本语言（如 JavaScript）来访问和操作文档的内容。DOM 把文档视为树形结构（树结构），其中每个节点代表文档的一部分，例如元素、属性或文本。这些节点可以被创建、读取、更新或删除，从而实现对文档内容的动态控制。
<div>、<p> 等。id、class 等。<!-- -->。// 1. 获取具有特定 ID 的元素
const divById = document.getElementById("my_div");
const divById_ = document.querySelector('#div');
console.log(divById);
console.log(divById_);
// 使用 dom 元素添加一些样式来突出显示这些元素
divById.style.backgroundColor = "yellow";
// 2. 获取具有特定类名的元素
const divsByClass = document.getElementsByClassName("div");
const divsByClass_ = document.querySelector('.div');
// 获取所有类名为 div 的元素
const divsAllByClass = document.querySelectorAll('.div');
console.log(divsByClass);
console.log(divsByClass_);
// 使用 dom 元素添加一些样式来突出显示这些元素
divsByClass[0].style.backgroundColor = "lightblue";
data- 为自定义属性*
<div data-id="1" data-spm="bzd"></div>
const one = document.querySelector('div');
console.log(one.dataset.id); // 1
console.log(one.dataset.spm); // bzd
data- 属性的命名规则如下：*
- 前缀必须是
data-：这是固定的，不能更改。- 之后的部分必须由字母、数字、连字符（-）组成：不能包含空格或其他特殊字符。
- 不能以数字开头：这是因为 HTML 属性名称不能以数字开始。
// 3. 获取具有特定属性值的元素
const divByDataId = document.querySelector("[data-id='1']");
console.log(divByDataId);
// 获取所有具有 data-id 属性的元素
const divsByDataId = document.querySelectorAll("[data-id='1']");
console.log(divsByDataId);
divByDataId.style.backgroundColor = "pink";
HTML 样式：
<div class="box">文化</div>
CSS 样式：
.box { width: 200px; height: 200px; color: #333; }
.active { color: red; background-color: pink; }
JavaScript 样式：
通过 classList 可以为 div 节点添加/删除/切换类（相比 className 更安全，不会覆盖前面的类名）。
const box = document.querySelector('.box');
// 添加类
box.classList.add('active');
// 删除类
box.classList.remove('active');
// 切换类，有就加上，没有就删掉
box.classList.toggle('active');
setTimeout 为定时器延迟函数，可以达到某个时间后执行里面的函数。
function greet() {
console.log("Hello, world!");
}
// 5000 毫秒（5 秒）后执行 greet 函数
setTimeout(greet, 5000);
取消定时器函数 clearTimeout()。
// 设置定时器延迟函数
const timeoutId = setTimeout(sayHi, 3000);
// 取消定时器
clearTimeout(timeoutId);
下面给大家推荐几个常用的事件，如果有其他需要可以再进行查询。
mouseover 和 mouseout 会有冒泡效果。mouseenter 和 mouseleave 没有冒泡效果（推荐）。click: 当用户点击元素时触发。dblclick: 当用户双击元素时触发。mousedown: 当用户按下鼠标按钮时触发。mouseup: 当用户释放鼠标按钮时触发。mousemove: 当用户移动鼠标时触发。mouseover: 当鼠标指针移动到元素上方时触发。mouseout: 当鼠标指针移出元素时触发。mouseenter: 当鼠标指针进入元素时触发（不冒泡）。mouseleave: 当鼠标指针离开元素时触发（不冒泡）。keydown: 当用户按下键盘上的键时触发。keyup: 当用户释放键盘上的键时触发。keypress: 当用户按下键盘上的字符键时触发（不推荐使用，已被弃用）。JavaScript 事件监听器可以用于处理各种用户交互和系统事件。
submit: 当表单被提交时触发。change: 当表单控件的值发生变化时触发。input: 当用户输入数据时触发。focus: 当元素获得焦点时触发。blur: 当元素失去焦点时触发。select: 当用户选中文本（例如在 <input> 或 <textarea> 中）时触发。<input type="text">
当向 input 输入框中输入字体按下和弹起键盘时会触发该事件
const input = document.querySelector('[type=text]');
// 键盘事件
input.addEventListener('keydown', function () {
console.log('按下');
});
input.addEventListener('keyup', function () {
console.log('弹起');
});
事件流（Event Flow）是指浏览器在处理事件时的过程。事件流主要有三种阶段：捕获阶段、目标阶段和冒泡阶段。
捕获阶段
document 对象开始传播，逐层向下，直到目标元素（事件的实际目标）。document 级别开始，逐步向下传递到目标元素的父元素、祖先元素，直到目标元素的事件处理程序开始接收事件。目标阶段
冒泡阶段
document 对象。document 对象。每个父元素的事件处理程序都有机会处理这个事件。在 addEventListener 方法中，true 作为第三个参数用于指定事件处理程序的事件流阶段。这个参数称为 capture（捕获）或 useCapture。
capture 参数 true：表示事件处理程序将会在事件的 捕获阶段 执行。false（默认值）：表示事件处理程序将在事件的 冒泡阶段 执行。默认 capture 为 false。
<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);
如果将 capture 参数设为 true，点击子元素会先弹出父级，再弹出子级；如果删除 capture 参数（默认 false），那么就先冒出子级，再弹出父级。
阻止冒泡：
// 阻止冒泡
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';
});
</script>
默认行为通常是向服务器发送表单数据并重新加载页面。通过阻止默认行为，可以防止这种情况发生，从而使表单在提交时不会刷新页面。
const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
// 阻止默认行为
e.preventDefault();
});
const element = document.querySelector('.scrollable');
console.log(element.scrollLeft); // 获取当前水平滚动位置
element.scrollLeft = 100; // 设置水平滚动位置为 100 像素
element.scrollTop = 100; // 设置垂直滚动位置为 100 像素
用于获取元素相对于其最近的已定位祖先元素的偏移量（左上角）。
const element = document.querySelector('.box');
console.log(element.offsetLeft); // 获取元素的左边距
console.log(element.offsetTop); // 获取元素的上边距
用于获取元素的视口尺寸，不包括滚动条、边框或外边距。它们表示元素的可视区域的宽度和高度。
const element = document.querySelector('.box');
console.log(element.clientWidth); // 获取元素的可视宽度
console.log(element.clientHeight); // 获取元素的可视高度
用于获取元素的实际宽度和高度，包括元素的边框和内边距，但不包括外边距。
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（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.href 实现页面跳转。
let i = 5;
let timer = setInterval(function () {
const span = document.querySelector('span');
if(span) {
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.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.setItem('test', 'dom');
// 获取键值对
const value = localStorage.getItem('test');
console.log(value); // 输出 "dom"
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online