JavaScript 基础与 DOM 操作

一、JavaScript 基础

1. 变量与数据类型

   • JavaScript 有多种数据类型，包括原始数据类型（如Number、String、Boolean、null、undefined）和复杂数据类型（如Object、Array）。

   • 变量声明使用var、let或const关键字。例如：

     • var num = 10;（var存在变量提升问题）
     • let name = "John";（let具有块级作用域）
     • const PI = 3.14;（const声明常量，不可重新赋值）

2. 函数

   • 函数定义有多种方式，例如：

     • 函数声明：

javascript

function add(a, b) {
    return a + b;
}

• 函数表达式：

javascript

var multiply = function(a, b) {
    return a * b;
};

• 箭头函数是 ES6 中的新特性，例如：

javascript

var subtract = (a, b) => a - b;

3. 条件语句和循环语句

   • 条件语句包括if - else和switch。例如：

javascript

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

• 循环语句有for、while和do - while。例如for循环：

javascript

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

二、DOM 操作

1. 获取元素

   • 使用document.getElementById()可以通过元素的id获取元素，例如：

javascript

var myElement = document.getElementById("my - id");

• document.getElementsByTagName()可以获取指定标签名的元素集合，例如：

javascript

var allParagraphs = document.getElementsByTagName("p");

• document.getElementsByClassName()用于获取指定类名的元素集合，例如：

javascript

var redElements = document.getElementsByClassName("red - class");

2. 修改元素内容和样式

   • 修改元素内容可以使用innerHTML或textContent属性。例如：

javascript

var myElement = document.getElementById("my - element");
myElement.innerHTML = "新的内容";

• 修改元素样式可以通过style属性，例如：

javascript

var myElement = document.getElementById("my - element");
myElement.style.color = "red";
myElement.style.fontSize = "20px";

3. 事件处理

   • 可以为元素添加事件监听器，例如为按钮添加点击事件：

javascript

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