当前位置：首页 > news >正文

JavaScript语法与DOM操作

news 来源：原创 2025/5/14 12:17:28

一、JS语法与DOM操作

（一）JS语法

1. 基础语法

2. 函数

3. 对象与数组

（二）DOM操作

1. DOM基础

2. 获取元素

3. 操作元素内容

4. 操作元素样式

5. 创建和插入元素

6. 删除和替换元素

7. 事件处理

一、JS语法与DOM操作

（一）JS语法

1. 基础语法

变量声明
- 使用var、let和const声明变量。
- var声明的变量存在变量提升，且在函数作用域内有效。
- let和const声明的变量不存在变量提升，let声明的变量在块级作用域内有效，const声明的变量用于声明常量，一旦赋值不能更改。
```
var x = 5;
let y = 10;
const z = 15;
```

数据类型

基本数据类型：String、Number、Boolean、Undefined、Null、Symbol（ES6新增）、BigInt（ES2020新增）。
引用数据类型：Object（包括Array、Function等）。

let str = "Hello"; // String
let num = 123; // Number
let bool = true; // Boolean
let undef; // Undefined
let nul = null; // Null
let sym = Symbol("sym"); // Symbol
let bigInt = BigInt(1234567890123456789012345678901234567890n); // BigInt
let obj = {}; // Object
let arr = []; // Array
let func = function () {}; // Function

运算符
- 算术运算符：+、-、*、/、%、++、--。
- 比较运算符：==、===、!=、!==、>、<、>=、<=。
- 赋值运算符：=、+=、-=、*=、/=等。
- 逻辑运算符：&&（逻辑与）、||（逻辑或）、!（逻辑非）。
```
let a = 5;
let b = 10;
let sum = a + b; // 算术运算
let isEqual = a == b; // 比较运算
let isTrue = a > 0 && b > 0; // 逻辑与运算
```

控制结构

条件语句

if语句
switch语句

if (a > b) {
  console.log("a大于b");
} else {
  console.log("a不大于b");
}

switch (a) {
  case 5:
    console.log("a是5");
    break;
  default:
    console.log("a不是5");
}

循环语句

for循环
while循环
do...while循环

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

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

let k = 0;
do {
  console.log(k);
  k++;
} while (k < 5);

2. 函数

函数声明与表达式
- 函数声明：function functionName(parameters) { ... }
- 函数表达式：let functionName = function(parameters) { ... };
```
function add(a, b) {
  return a + b;
}

let subtract = function (a, b) {
  return a - b;
};
```

参数与返回值

函数可以有任意数量的参数，通过arguments对象可以访问所有参数。
使用return语句返回值。

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

function sumAll() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

闭包

闭包是一个函数和其周围的状态（词法环境）的组合。闭包可以捕获外部函数的局部变量，即使外部函数已经执行完毕。

function createCounter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

let counter = createCounter();
counter(); // 输出1
counter(); // 输出2

3. 对象与数组

对象

对象是键值对的集合，键是字符串，值可以是任意数据类型。
创建对象的方式：对象字面量、new Object()、构造函数、Object.create()。

let person = {
  name: "John",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  },
};

let person2 = new Object();
person2.name = "Jane";
person2.age = 25;

function Person(name, age) {
  this.name = name;
  this.age = age;
}

let person3 = new Person("Bob", 40);

let person4 = Object.create(person);

数组

数组是一种特殊的对象，用于存储有序的数据集合。
创建数组的方式：数组字面量、new Array()。

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

// 数组方法
arr.push(6); // 添加元素到数组末尾
arr.pop(); // 移除数组末尾元素
arr.unshift(0); // 添加元素到数组开头
arr.shift(); // 移除数组开头元素
let newArr = arr.slice(1, 3); // 截取数组部分元素
let joinedArr = arr.concat([6, 7]); // 合并数组

（二）DOM操作

1. DOM基础

DOM（文档对象模型） 是一个编程接口，用于操作HTML和XML文档。它将文档表示为一个由节点和对象组成的树形结构，通过这些节点和对象，程序可以更改文档的结构、样式和内容。
节点类型
- 元素节点：<div>、<p>等。
- 属性节点：id="main"、class="container"等。
- 文本节点：元素内的文本内容。
- 注释节点：。

2. 获取元素

通过ID获取元素
- document.getElementById(id)：根据元素的id属性值获取元素。
```
let element = document.getElementById("main");
```
通过类名获取元素
- document.getElementsByClassName(className)：根据元素的class属性值获取元素集合。
```
let elements = document.getElementsByClassName("container");
```
通过标签名获取元素
- document.getElementsByTagName(tagName)：根据元素的标签名获取元素集合。
```
let divs = document.getElementsByTagName("div");
```
通过CSS选择器获取元素
- document.querySelector(selector)：根据CSS选择器获取第一个匹配的元素。
- document.querySelectorAll(selector)：根据CSS选择器获取所有匹配的元素集合。
```
let firstDiv = document.querySelector("div");
let allDivs = document.querySelectorAll("div");
```

3. 操作元素内容

设置和获取文本内容

textContent：获取或设置元素的文本内容。

let p = document.querySelector("p");
console.log(p.textContent); // 获取文本内容
p.textContent = "新的文本内容"; // 设置文本内容

设置和获取HTML内容

innerHTML：获取或设置元素的HTML内容。

let div = document.querySelector("div");
console.log(div.innerHTML); // 获取HTML内容
div.innerHTML = "<p>新的HTML内容</p>"; // 设置HTML内容

4. 操作元素样式

直接操作样式

通过style属性直接设置元素的样式。

let element = document.getElementById("main");
element.style.color = "red";
element.style.fontSize = "20px";

切换类名
- 使用classList属性操作元素的类名。
- classList.add(className)：添加类名。
- classList.remove(className)：移除类名。
- classList.toggle(className)：切换类名（如果存在则移除，不存在则添加）。
```
let element = document.getElementById("main");
element.classList.add("active");
element.classList.remove("inactive");
element.classList.toggle("highlight");
```

5. 创建和插入元素

创建元素
- document.createElement(tagName)：创建一个新的元素。
```
let newDiv = document.createElement("div");
```

插入元素

appendChild(child)：将一个元素作为子元素添加到另一个元素的末尾。
insertBefore(child, referenceChild)：将一个元素插入到另一个元素的指定位置。

let parentDiv = document.getElementById("parent");
let newP = document.createElement("p");
newP.textContent = "新段落";
parentDiv.appendChild(newP);

let referenceP = document.querySelector("p");
parentDiv.insertBefore(newP, referenceP);

6. 删除和替换元素

删除元素

removeChild(child)：从父元素中移除一个子元素。

let parentDiv = document.getElementById("parent");
let childP = document.querySelector("p");
parentDiv.removeChild(childP);

替换元素

replaceChild(newChild, oldChild)：用一个新元素替换父元素中的一个子元素。

let parentDiv = document.getElementById("parent");
let newDiv = document.createElement("div");
newDiv.textContent = "新内容";
let oldDiv = document.querySelector("div");
parentDiv.replaceChild(newDiv, oldDiv);

7. 事件处理

绑定事件

addEventListener(eventType, eventHandler)：为元素绑定事件监听器。

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

事件对象

在事件处理函数中，可以通过event对象获取事件的相关信息，如事件类型、目标元素等。

button.addEventListener("click", function (event) {
  console.log(event.type); // 输出事件类型
  console.log(event.target); // 输出目标元素
});

解绑事件
- removeEventListener(eventType, eventHandler)：移除元素的事件监听器。
```
button.removeEventListener("click", function () {
  console.log("按钮被点击");
});
```