浏览器端的 js 包括哪几个部分

一、核心语言部分

1. 变量与数据类型

变量用于存储数据，在 JavaScript 中有多种数据类型，如基本数据类型（字符串、数字、布尔值、undefined、null）和引用数据类型（对象、数组、函数）。

let name = "John"; // 字符串类型的变量let age = 30; // 数字类型的变量let isStudent = false; // 布尔类型的变量

2. 运算符

包括算术运算符（如 +、-、\*、/）、比较运算符（如 >、<、==、===）、逻辑运算符（如 &&、||、!）等。它们用于对变量和数据进行各种运算和比较。

let a = 5;let b = 3;let sum = a + b; // 使用算术运算符求和let isGreater = a > b; // 使用比较运算符比较大小

3. 控制流语句

条件语句：如`if - else`和`switch`，用于根据不同的条件执行不同的代码块。

let score = 80;if (score >= 90) {console.log("优秀");} else if (score >= 60) {console.log("及格");} else {console.log("不及格");}

4. 循环语句

包括`for`、`while`和`do - while`循环，用于重复执行一段代码。

for (let i = 0; i < 5; i++) {console.log(i);}

二、DOM（文档对象模型）操作部分

1. 节点选择与访问

可以使用多种方法选择 HTML 元素，如`getElementById`、`getElementsByClassName`、`getElementsByTagName`和更现代的`querySelector`及`querySelectorAll`。

let elementById = document.getElementById("my - element");let elementsByClass = document.getElementsByClassName("my - class");let elementsByTag = document.getElementsByTagName("p");let selectedElement = document.querySelector(".my - selector");let selectedElements = document.querySelectorAll("li");

2. 节点修改与创建

可以修改元素的属性、内容和样式。

let element = document.getElementById("my - element");element.textContent = "新的内容";

还可以创建新的元素并添加到文档中。

let newDiv = document.createElement("div");newDiv.textContent = "这是一个新的div";document.body.appendChild(newDiv);

三、BOM（浏览器对象模型）部分

1. 窗口操作

可以操作浏览器窗口，如`window.open`用于打开新的窗口，`window.close`用于关闭当前窗口（在一定条件下）。

let newWindow = window.open("https://www.example.com", "new - window");

2. 导航与历史记录

涉及`window.location`用于获取或设置当前页面的 URL，`window.history`用于操作浏览器的历史记录，如`history.back`（后退）和`history.forward`（前进）。

window.location.href = "https://www.new - url.com";history.back();

四、事件处理部分

1. 事件绑定

可以将函数（事件处理程序）绑定到 HTML 元素的各种事件上，如`click`、`mouseover`、`keydown`等。

let button = document.getElementById("my - button");button.addEventListener("click", function () {console.log("按钮被点击了");});

2. 事件冒泡与捕获

当一个事件在一个元素上被触发时，它会在 DOM 树中传播，这个过程涉及事件冒泡（从子元素向上传播到父元素）和事件捕获（从父元素向下传播到子元素）。可以通过设置`addEventListener`的第三个参数来控制是在冒泡阶段还是捕获阶段处理事件。

let parent = document.getElementById("parent - element");let child = document.getElementById("child - element");// 在捕获阶段处理事件parent.addEventListener("click",function () {console.log("父元素捕获阶段被点击");},true);// 在冒泡阶段处理事件child.addEventListener("click", function () {console.log("子元素冒泡阶段被点击");});