前言：JS 是由 ES、BOM、DOM 组成。
1. ES
ECMAScript 简称 ES。主要包括 JS 中的变量声明、数据类型、运算符、控制流语句、函数定义等基本语法结构。我们常说的什么 ES6 新特性，如箭头函数、模板字符串、解构、类、模块。就是指的这个。
2. BOM
BOM（Browser Object Model，浏览器对象模型）是指浏览器提供的一组用于与浏览器窗口进行交互的对象和方法。
2.1 主要组成部分
window 对象是 BOM 的核心对象、代表浏览器窗口本身。几乎所有的 BOM 功能都是通过 window 对象实现的。
2.2 常用方法和属性
2.2.1 innerWidth 和 innerHeight
获取浏览器窗口的内部宽度和高度（不包含浏览器边框和菜单栏）。
console.log(`窗口宽度：${window.innerWidth}`);
console.log(`窗口高度：${window.innerHeight}`);2.2.2 outerWidth 和 outerHeight
获取浏览器窗口的外部宽度和高度（包括浏览器边框等）。
console.log(`窗口外部宽度：${window.outerWidth}`);
console.log(`窗口外部高度：${window.outerHeight}`);2.2.3 screenX 和 screenY
表示窗口相对于屏幕左上角的坐标。
console.log(`窗口横坐标：${window.screenX}`);
console.log(`窗口纵坐标：${window.screenY}`);2.2.4 location
包含当前窗口的 URL 信息，可以通过它进行页面跳转等操作。
// 跳转到新页面
window.location.href = "https://www.example.com";2.2.5 history
用于操作浏览器的历史记录，可以进行前进、后退等操作。
// 后退一页
window.history.back();
// 前进一页
window.history.forward();2.2.6 alert()
显示一个带有指定消息和一个 “确定” 按钮的警告框。
window.alert("这是一个警告框！");2.2.7 confirm()
显示一个带有指定消息和 “确定”、“取消” 按钮的确认框，返回一个布尔值表示用户是否点击了 “确定”。
const result = window.confirm("你确定要执行这个操作吗？");
if (result) {
console.log("用户点击了确定");
} else {
console.log("用户点击了取消");
}2.2.8 prompt()
显示一个带有指定消息、一个输入框和 “确定”、“取消” 按钮的提示框，返回用户输入的内容或 null。
const name = window.prompt("请输入你的名字：");
if (name) {
console.log(`你输入的名字是：${name}`);
} else {
console.log("你没有输入名字");
}2.2.9 setTimeout() 和 clearTimeout()
setTimeout() 用于在指定的毫秒数后执行一次函数。clearTimeout() 用于取消由 setTimeout() 设置的定时器。
// 设置定时器
const timerId = setTimeout(() => {
console.log("定时器触发了！");
}, 3000);
// 取消定时器
clearTimeout(timerId);2.2.10 setInterval() 和 clearInterval()
setInterval() 用于按照指定的时间间隔重复执行函数。clearInterval() 用于取消由 setInterval() 设置的定时器。
// 设置间隔定时器
const intervalId = setInterval(() => {
console.log("间隔定时器触发了！");
}, 1000);
// 取消间隔定时器
clearInterval(intervalId);2.2.11 open() 和 close()
open() 用于打开一个新的浏览器窗口或标签页。close() 用于关闭当前窗口或由 open() 打开的窗口。
// 打开新窗口
const newWindow = window.open("https://www.example.com", "_blank");
// 关闭新窗口
newWindow.close();3. DOM
DOM（Document Object Model，文档对象模型）是一种用于 HTML 和 XML 文档的编程接口。它将文档表示为一个由节点组成的树结构，允许开发人员通过编程语言（如 JavaScript）来访问和操作文档的内容、结构和样式。
3.1 DOM 的结构
节点树：DOM 将文档表示为一个节点树，其中每个节点代表文档中的一个元素、属性、文本内容或其他部分。节点之间通过父子关系、兄弟关系等连接起来，形成一个层次结构。
节点类型：DOM 中有不同类型的节点，包括元素节点、文本节点、属性节点、注释节点等。
3.2 DOM 的作用和用途
3.2.1 访问和修改文档内容
通过 DOM，开发人员可以使用编程语言来访问文档中的各个元素和内容，并进行修改、添加或删除操作。
// 获取元素
const divElement = document.getElementById("myDiv");
// 修改文本内容
divElement.textContent = "新的文本内容";
// 修改样式
divElement.style.backgroundColor = "red";
// 添加新元素
const newParagraph = document.createElement("p");
newParagraph.textContent = "这是一个新的段落。";
document.body.appendChild(newParagraph);3.2.2 响应事件
DOM 允许开发人员为文档中的元素添加事件处理程序，以便在特定事件发生时执行相应的代码。
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
console.log("按钮被点击了！");
});3.2.3 动态更新页面
通过 DOM，开发人员可以根据用户的交互或其他条件动态地更新页面的内容和样式，实现更加交互性和动态性的网页。