前端开发进阶：JavaScript基础与DOM操作

# 1. JavaScript基础

### 1.1 JavaScript介绍与概述

JavaScript是一种高级的、解释型的编程语言。它被广泛应用于Web前端开发中，用于为网页添加交互功能。随着Node.js的出现，JavaScript还可以用于服务器端开发。JavaScript的特点包括基于原型、函数是一等对象、动态类型、事件驱动等。

### 1.2 变量与数据类型

JavaScript中的变量可以用var、let、const关键字声明，它们有不同的作用域和生命周期。
常见的数据类型包括：数字（Number）、字符串（String）、布尔型（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）等。

// 变量声明与数据类型
var x = 5; // 使用var声明变量
let y = "Hello"; // 使用let声明变量
const PI = 3.14; // 使用const声明常量

// 数据类型示例
let num = 10;
let str = "JavaScript";
let bool = true;
let arr = [1, 2, 3];
let obj = { name: "JavaScript", version: "ES6" };
let empty = null;
let undef;

**代码总结：** JavaScript中可以使用var、let、const声明变量，数据类型包括数字、字符串、布尔型、数组、对象、空、未定义等。

### 1.3 条件语句与循环

JavaScript中的条件语句包括if语句、switch语句，循环结构包括for循环、while循环、do-while循环。

// 条件语句示例
let age = 18;
if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

// 循环示例
for (let i = 0; i < 5; i++) {
  console.log("循环次数：" + i);
}

**结果说明：** 上述代码中，当age大于等于18时，输出“成年人”，否则输出“未成年人”；for循环输出循环次数。

### 1.4 函数与作用域

JavaScript中使用function关键字定义函数，并且函数作用域遵循词法作用域规则。

// 函数示例
function greet(name) {
  return "Hello, " + name;
}

let message = greet("JavaScript");
console.log(message);

**代码总结：** 通过function关键字可以声明函数，并且函数内部的变量遵循词法作用域规则。

### 1.5 对象与数组

JavaScript中的对象和数组是非常重要的数据结构，对象是一种无序的集合数据类型，而数组是一种有序的集合数据类型。

// 对象与数组示例
let person = {
  name: "Alice",
  age: 25,
  hobbies: ["coding", "reading", "traveling"]
};

console.log(person.name);
console.log(person.hobbies[0]);

**结果说明：** 上述代码中，定义了一个person对象，包括name、age和hobbies属性，通过person.name和person.hobbies[0]分别访问对象的属性和数组的元素。

以上是第一章节的内容，接下来我们将继续学习DOM操作基础。

# 2. DOM操作基础

DOM(Document Object Model)是一种对文档结构化表示的方式，通过它我们可以轻松地获取、修改文档内容。在前端开发中，DOM操作是非常常见和必要的技能。让我们来深入了解DOM操作的基础知识。

### 2.1 DOM是什么？

DOM是文档对象模型（Document Object Model）的缩写，它将整个HTML或XML页面抽象为一个树形结构。每个节点都是文档中的对象，你可以通过操作这些节点来实现对文档的访问和修改。

DOM 主要用于访问和修改页面的内容和结构，是 JavaScript 操作网页的接口。

### 2.2 获取元素与操作元素

在 JavaScript 中，我们可以通过 `document` 对象来访问和操作 DOM。以下是一些常见的DOM操作示例:

// 获取id为"myDiv"的元素
var myDiv = document.getElementById('myDiv');

// 修改元素的文本内容
myDiv.innerHTML = 'Hello, World!';

// 添加一个新的段萤
var newParagraph = document.createElement('p');
newParagraph.innerHTML = 'This is a new paragraph.';
myDiv.appendChild(newParagraph);

// 移除元素
myDiv.removeChild(newParagraph);

**代码总结：** 通过 `document.getElementB