JavaScript

JavaScript是一种广泛用于网页开发的脚本语言，可在浏览器中运行，也可通过Node.js在服务器端运行。

一、JavaScript 基础

1. 引入方式

• 内嵌式：在 <script> 标签中直接编写代码

<script>
  console.log("Hello, JavaScript!");
</script>

•  外链式：通过 src 属性引入外部 .js 文件

<script src="script.js"></script>

• 行内式：直接写在 HTML 标签的事件属性中（不推荐）

<button onclick="alert('Hi')">点击</button>

2. 变量与数据类型

• 变量声明：let（块级作用域）、const（常量）、var（函数级作用域，尽量避免）

let age = 20;
const name = "Alice";
var isStudent = true; // 不推荐

• 数据类型：
  • 基本类型：string、number、boolean、null、undefined、symbol（ES6+）、bigint（ES11+）
  • 引用类型：object（包括数组、函数、日期等）

• 类型转换：

// 转为字符串
String(123); // "123"
123 + ""; // "123"

// 转为数字
Number("123"); // 123
parseInt("123abc"); // 123
parseFloat("3.14"); // 3.14

与 let 和 var 的对比

• const：用于声明常量，一旦赋值就不能重新赋值，具有块级作用域。
• let：用于声明变量，能够重新赋值，同样具有块级作用域。
• var：早期用于声明变量，可重新赋值，作用域是函数级或者全局级，没有块级作用域。

// const 示例
const num = 10;
// num = 20; // 这行代码会报错，因为 const 声明的常量不能重新赋值

// let 示例
let count = 5;
count = 15; // 可以重新赋值

// var 示例
var name = 'John';
name = 'Jane'; // 可以重新赋值

if (true) {
    let blockVar = 'block scoped with let';
    var functionVar = 'function scoped with var';
}
// console.log(blockVar); // 报错，let 具有块级作用域
console.log(functionVar); // 可以访问，var 没有块级作用域

3. 运算符

• 算术运算符：+、-、*、/、%（取余）、++、--
• 赋值运算符：=、+=、-=、*= 等
• 比较运算符：==（松散相等）、===（严格相等，推荐）、>、< 等
• 逻辑运算符：&&（与）、||（或）、!（非）
• 三元运算符：条件 ? 表达式1 : 表达式2

let result = 5 > 3 ? "大于" : "小于"; // "大于"

4. 流程控制

• 条件语句：

if (age > 18) {
  console.log("成年");
} else if (age === 18) {
  console.log("刚成年");
} else {
  console.log("未成年");
}

• 循环语句：

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

// while 循环
let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

// for...of（遍历数组/字符串）
const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

二、数组与对象

1. 数组（Array）

• 创建数组：

const arr = [1, 2, 3];
const arr2 = new Array(4, 5, 6);

• 常用方法：
• • • push()：末尾添加元素
    • shift()：删除首个元素
    • unshift()：开头添加元素
    • slice(start, end)：截取子数组（不修改原数组）
    • splice(start, deleteCount, ...items)：修改数组（会修改原数组）
    • map()：遍历并返回新数组
    • filter()：过滤元素
    • reduce()：累加计算

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2); // [2,4,6,8]
const even = numbers.filter(n => n % 2 === 0); // [2,4]

2. 对象（Object）

• 创建对象：

const person = {
  name: "Bob",
  age: 25,
  sayHi: function() {
    console.log("Hi");
  }
};

• 访问属性：

person.name; // "Bob"
person["age"]; // 25

• 遍历对象：

for (const key in person) {
  console.log(key + ": " + person[key]);
}

三、函数

1. 函数声明与调用

// 函数声明
function add(a, b) {
  return a + b;
}

// 函数表达式
const multiply = function(a, b) {
  return a * b;
};

// 箭头函数（ES6+）
const divide = (a, b) => a / b;

// 调用
console.log(add(2, 3)); // 5

2. 函数参数

默认参数：

function greet(name = "Guest") {
  console.log("Hello, " + name);
}
greet(); // "Hello, Guest"

剩余参数：

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3); // 6

四、DOM 操作（网页交互）

DOM（文档对象模型）是HTML的编程接口，JavaScript可通过DOM操作网页元素。

1. 获取元素document

document 属于全局对象，代表整个 HTML 文档。是 DOM（文档对象模型）的根节点。通过 document 对象，你可以访问和操作网页中的所有元素（如 <div>、<p>、<button> 等）、属性、文本内容等。能够对 HTML 文档的内容、结构和样式进行访问与修改。

简单说：

document 就像一个 “入口”，JavaScript 通过它来 “连接” 并操作网页内容。比如你想获取一个按钮、修改一段文字、添加新元素，都需要从 document 开始。

总结：

document 是 JavaScript 操作网页的 “总入口”，所有对 DOM 元素的访问、修改、创建等操作，几乎都需要通过 document 对象来实现。它就像一个 “桥梁”，连接着 JavaScript 代码和网页的 HTML 结构。

2.getElementById

这是 document 对象的一个方法，用于 通过 HTML 元素的 id 属性获取唯一元素 的 DOM 方法。根据指定的 id 值，从当前文档中查找并返回对应的唯一元素。由于 HTML 规范中要求 id 在整个文档中是唯一的（不能重复），因此该方法只会返回 一个元素（如果找到），或 null（如果未找到）。

document.getElementById(idValue);

• dValue：字符串类型，要查找的元素的 id 属性值（区分大小写）。
• 返回值：找到则返回对应的 DOM 元素对象，未找到则返回 null。

示例：HTML结构

<div id="header">这是头部</div>
<p id="content">这是内容</p>
<button id="submitBtn">提交</button>

JavaScript代码

// 获取 id 为 "content" 的元素
const contentElement = document.getElementById("content");
console.log(contentElement); // 输出 <p id="content">这是内容</p>

// 操作获取到的元素（例如修改内容）
contentElement.textContent = "修改后的内容";

// 尝试获取不存在的 id，返回 null
const nonExistent = document.getElementById("none");
console.log(nonExistent); // 输出 null

特点：

1. 唯一性：由于 id 是唯一的，因此该方法只会返回单个元素（或 null），无需处理集合。
2. 高效性：相比通过类名或标签名查找，getElementById 性能更好，因为浏览器会对 id 建立快速索引。
3. 大小写敏感：例如 id="MyId" 和 id="myid" 会被视为不同的 id。
4. 只能从 document 调用：与 getElementsByClassName 不同，getElementById 只能通过 document 对象调用（不能在某个父元素内查找，因为 id 是全局唯一的）。

注意事项：

• 若 HTML 中存在重复的 id（不符合规范），该方法只会返回 第一个 匹配的元素。
• 如果需要根据更复杂的条件（如类名、层级关系）查找元素，可使用 querySelector 等方法，但 getElementById 是获取唯一元素的最直接方式。

例如，以下代码与 getElementById("submitBtn") 效果相同，但 getElementById 更简洁高效：

// 等效但不推荐的写法
document.querySelector("#submitBtn"); // 通过 CSS 选择器 #id 查找

3.getElementsByClassName

通过类名获取 HTML 元素 的 DOM 方法。根据指定的 CSS 类名，从文档中查找并返回所有包含该类名的元素集合。

document.getElementsByClassName(className);
// 或在某个父元素内查找
parentElement.getElementsByClassName(className);

• className：字符串，指定要查找的类名（多个类名用空格分隔，如 "active item"）。
• 返回值：一个 动态更新的 HTMLCollection 集合（类似数组，但不是真正的数组），包含所有匹配的元素。

特点：

1. 动态性：返回的集合会实时反映文档的变化（例如元素添加 / 移除类名时，集合会自动更新）。
2. 范围性：可在特定父元素内查找（而非整个文档），提高效率。
3. 类名匹配：严格匹配类名（区分大小写），且支持多类名（需同时包含所有类名才会被匹配）。

示例：HTML结构

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box active">盒子3（激活）</div>
<p class="text">文本</p>

JavaScript代码

// 1. 获取整个文档中所有 class 为 "box" 的元素
const boxes = document.getElementsByClassName("box");
console.log(boxes.length); // 输出：3（3个含 "box" 类的元素）

// 2. 遍历集合（需用索引访问，类似数组）
for (let i = 0; i < boxes.length; i++) {
  console.log(boxes[i].textContent); // 依次输出：盒子1、盒子2、盒子3（激活）
}

// 3. 在特定父元素内查找（假设页面有个 id 为 "container" 的容器）
const container = document.getElementById("container");
const activeItems = container.getElementsByClassName("active");
// 只查找 container 内部 class 为 "active" 的元素

// 4. 多类名匹配（同时包含 "box" 和 "active" 的元素）
const activeBoxes = document.getElementsByClassName("box active");
console.log(activeBoxes.length); // 输出：1（仅盒子3匹配）

注意事项：

• 返回的 HTMLCollection 是类数组对象，不支持 forEach、map 等数组方法，需先转换为数组（如 Array.from(boxes)）才能使用。
• 若需更灵活的选择器（如结合标签名、ID 等），可使用 querySelectorAll（返回静态的 NodeList 集合）。

例如，用 querySelectorAll 实现类似功能：

const boxes = document.querySelectorAll(".box"); // 静态集合，不动态更新

4.getElementsByTagName

用于 通过 HTML 标签名获取元素 的 DOM 方法。根据指定的 HTML 标签名称（如 div、p、img 等），从文档或指定父元素中查找并返回所有匹配该标签的元素集合。

// 从整个文档中查找
document.getElementsByTagName(tagName);

// 从指定父元素内查找（缩小范围）
parentElement.getElementsByTagName(tagName);

• tagName：字符串，指定要查找的标签名（如 "div"、"p"，不区分大小写，但习惯用小写）。
• 返回值：一个 动态更新的 HTMLCollection 集合（类数组对象），包含所有匹配的元素；若没有匹配元素，返回空集合。

示例：HTML结构

<div>盒子1</div>
<p>段落1</p>
<div>盒子2</div>
<p>段落2</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

JavaScript代码

// 1. 获取整个文档中所有 <div> 标签的元素
const divs = document.getElementsByTagName("div");
console.log(divs.length); // 输出：2（2个 div 元素）

// 2. 遍历集合（通过索引访问）
for (let i = 0; i < divs.length; i++) {
  console.log(divs[i].textContent); // 依次输出：盒子1、盒子2
}

// 3. 在指定父元素内查找（例如只找 <ul> 中的 <li>）
const ul = document.getElementsByTagName("ul")[0]; // 先获取 ul 元素
const lis = ul.getElementsByTagName("li");
console.log(lis.length); // 输出：2（ul 内的 2 个 li 元素）

// 4. 不区分大小写（查找 <P> 等效于 <p>）
const paragraphs = document.getElementsByTagName("P");
console.log(paragraphs.length); // 输出：2（2个 p 元素）

特点：

1. 动态性：返回的 HTMLCollection 会实时反映文档变化（例如新增 / 删除标签时，集合会自动更新）。
2. 范围灵活：可在整个文档中查找，也可在某个父元素内查找（缩小查找范围，提高效率）。
3. 标签名匹配：不区分大小写（如 "DIV" 和 "div" 效果相同）。
4. 类数组特性：返回的集合不是真正的数组，不支持 forEach、map 等数组方法，需转换为数组（如 Array.from(divs)）后使用。

注意事项：

• 若需获取所有标签（如整个文档的所有元素），可传入 "*" 作为参数：

const allElements = document.getElementsByTagName("*");

• 与 querySelectorAll（返回静态 NodeList）相比，getElementsByTagName 更适合需要动态跟踪元素变化的场景。

例如，用 querySelectorAll 实现类似功能（返回静态集合）：

const divs = document.querySelectorAll("div"); // 静态集合，不随文档变化

5.querySelector

 通过 CSS 选择器语法获取元素 的 DOM 方法，它能根据灵活的选择器规则，从文档或指定父元素中查找并返回 第一个匹配的元素。

支持使用各种 CSS 选择器（如类选择器、ID 选择器、标签选择器、后代选择器等）来定位元素，是获取元素的 “万能工具”，尤其适合复杂条件的查找。

// 从整个文档中查找第一个匹配的元素
document.querySelector(selector);

// 从指定父元素内查找第一个匹配的元素
parentElement.querySelector(selector);

• selector：字符串，符合 CSS 语法的选择器（如 #id、.class、div、div .active 等）。
• 返回值：找到则返回第一个匹配的 DOM 元素，未找到则返回 null。

示例：HTML结构

<div class="box">盒子1</div>
<div class="box highlight">盒子2（高亮）</div>
<p id="intro">介绍文本</p>
<ul>
  <li class="item">项目1</li>
  <li class="item">项目2</li>
</ul>

JavaScript代码

// 1. 通过 ID 选择器（#id）获取元素（等效于 getElementById）
const intro = document.querySelector("#intro");
console.log(intro.textContent); // 输出：介绍文本

// 2. 通过类选择器（.class）获取第一个匹配元素
const firstBox = document.querySelector(".box");
console.log(firstBox.textContent); // 输出：盒子1

// 3. 通过标签选择器获取元素
const firstLi = document.querySelector("li");
console.log(firstLi.textContent); // 输出：项目1

// 4. 复杂选择器（后代选择器 + 类选择器）
// 查找 ul 中 class 为 item 的第一个元素
const ulItem = document.querySelector("ul .item");
console.log(ulItem.textContent); // 输出：项目1

// 5. 在指定父元素内查找（如只在 .highlight 元素内查找）
const highlightBox = document.querySelector(".highlight");
const nested = highlightBox.querySelector("span"); // 假设 .highlight 内有 span

特点：

1. 支持复杂选择器：可使用 CSS 中的各种组合选择器（如 div > p 子元素选择器、[name="username"] 属性选择器等），灵活性远超 getElementById 等方法。

// 查找 name 属性为 "email" 的 input 元素
const emailInput = document.querySelector('input[name="email"]');

1. 返回第一个匹配元素：即使有多个匹配元素，也只返回第一个。
2. 静态结果：返回的元素不会随文档变化动态更新（与 getElementsByClassName 等返回的动态集合不同）。
3. 范围灵活：可在整个文档中查找，也可限制在某个父元素内部查找。

注意事项：

• 选择器语法必须符合 CSS 规范，否则会报错（例如选择器中有错误符号）。
• 若需要获取 所有匹配的元素，可使用 querySelectorAll（返回一个静态的 NodeList 集合）。

例如，获取所有 li 元素：

const allLis = document.querySelectorAll("li"); // 返回所有 li 的集合

总结：querySelector 是获取元素的高效且灵活的方法，尤其适合需要复杂选择逻辑的场景，是实际开发中常用的 DOM 操作工具