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

如何用 JavaScript 操作 DOM 元素？

news 2025/7/29 1:05:16

如何用 JavaScript 操作 DOM 元素？——结合实际项目代码示例讲解

在前端开发中，DOM（文档对象模型）操作是与页面交互的核心。通过 DOM 操作，开发者可以动态地修改页面内容、响应用户交互、控制样式等。JavaScript 提供了强大的 DOM 操作 API，帮助开发者高效地实现这些功能。

本文将结合实际项目代码示例，系统讲解如何用 JavaScript 操作 DOM 元素。我们将从基础操作开始，逐步深入到更复杂的应用场景。

引言：什么是 DOM 操作？
DOM 元素的获取
- getElementById()
- getElementsByClassName()
- querySelector() 与 querySelectorAll()
DOM 元素的修改
- 修改文本内容
- 修改属性
- 修改样式
DOM 元素的创建与插入
- 创建新元素
- 插入新元素
- 删除元素
事件处理与 DOM 操作
实际项目代码示例
- 示例 1: 基础 DOM 操作
- 示例 2: 动态创建元素并插入
- 示例 3: 事件处理与 DOM 更新
总结与最佳实践

1. 引言：什么是 DOM 操作？

DOM（文档对象模型）是浏览器提供的一种接口，它将 HTML 文档中的每个元素、属性、文本节点都映射为一个对象。在 JavaScript 中，我们可以通过 DOM 操作来访问和修改这些对象，从而动态更新页面内容和响应用户交互。

常见的 DOM 操作包括：

获取元素
修改元素内容、属性、样式
创建和删除元素
绑定事件

2. DOM 元素的获取

JavaScript 提供了多种方法来获取页面上的 DOM 元素：

`getElementById()`

通过元素的 id 获取单个元素。

let element = document.getElementById('myElement');
console.log(element);  // 输出对应 id 为 'myElement' 的元素

`getElementsByClassName()`

通过元素的 class 获取一组元素，返回一个类数组（HTMLCollection）。

let elements = document.getElementsByClassName('myClass');
console.log(elements);  // 输出所有类名为 'myClass' 的元素

`querySelector()` 与 `querySelectorAll()`

querySelector() 获取第一个匹配的元素。
querySelectorAll() 获取所有匹配的元素，返回一个 NodeList（类数组）。

let firstDiv = document.querySelector('div');
console.log(firstDiv);  // 输出第一个 <div> 元素let allDivs = document.querySelectorAll('div');
console.log(allDivs);   // 输出所有 <div> 元素

3. DOM 元素的修改

修改文本内容

可以使用 textContent 或 innerText 修改元素的文本内容。

let element = document.getElementById('myElement');
element.textContent = '新的文本内容';  // 修改文本

修改属性

可以通过 setAttribute() 和 getAttribute() 修改或获取元素的属性值。

let imgElement = document.querySelector('img');
imgElement.setAttribute('src', 'newImage.jpg');  // 修改图片路径let srcValue = imgElement.getAttribute('src');   // 获取当前图片路径
console.log(srcValue);  // 输出: 'newImage.jpg'

修改样式

可以使用 style 属性直接修改内联样式，或者通过 classList 操作类名来修改样式。

let div = document.getElementById('myDiv');
div.style.backgroundColor = 'red';  // 修改背景色// 使用 classList 操作类名
div.classList.add('newClass');  // 添加类
div.classList.remove('oldClass');  // 移除类

4. DOM 元素的创建与插入

创建新元素

可以使用 document.createElement() 创建新的 HTML 元素。

let newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的 div 元素';
document.body.appendChild(newDiv);  // 将新元素添加到页面中

插入新元素

可以使用 appendChild() 将新元素插入到父元素中，或者使用 insertBefore() 在指定位置插入元素。

let parent = document.getElementById('parentElement');
let newDiv = document.createElement('div');
newDiv.textContent = '新插入的元素';// 将新元素添加到父元素的末尾
parent.appendChild(newDiv);// 在父元素的第一个子元素前插入新元素
let firstChild = parent.firstChild;
parent.insertBefore(newDiv, firstChild);

删除元素

使用 removeChild() 删除元素，或者直接使用 remove() 删除元素本身。

let elementToRemove = document.getElementById('elementToDelete');
elementToRemove.remove();  // 直接删除该元素// 或者通过父元素删除
let parent = document.getElementById('parentElement');
parent.removeChild(elementToRemove);

5. 事件处理与 DOM 操作

JavaScript 可以通过事件处理器来响应用户的操作（如点击、键盘输入等）。

绑定事件

使用 addEventListener() 来绑定事件处理函数，常见的事件包括 click、mouseover、keydown 等。

let button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('按钮被点击了！');
});

事件对象

事件处理函数可以接收一个事件对象作为参数，该对象包含了有关事件的详细信息。

let button = document.getElementById('myButton');
button.addEventListener('click', function(event) {console.log(event.target);  // 输出触发事件的元素console.log(event.type);    // 输出事件类型，'click'
});

6. 实际项目代码示例

示例 1: 基础 DOM 操作

假设我们需要实现一个简单的交互：点击按钮时，修改某个元素的文本和样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM 操作示例</title>
</head>
<body><div id="message">点击按钮改变文本</div><button id="changeTextBtn">改变文本</button><script>let button = document.getElementById('changeTextBtn');button.addEventListener('click', function() {let messageDiv = document.getElementById('message');messageDiv.textContent = '文本已被修改！';messageDiv.style.color = 'blue';});</script>
</body>
</html>

示例 2: 动态创建元素并插入

我们需要在页面加载时动态生成并插入一个列表。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态创建列表</title>
</head>
<body><ul id="itemList"></ul><script>let items = ['苹果', '香蕉', '橙子'];let ul = document.getElementById('itemList');items.forEach(function(item) {let li = document.createElement('li');li.textContent = item;ul.appendChild(li);});</script>
</body>
</html>

示例 3: 事件处理与 DOM 更新

我们要实现一个简单的计数器，点击按钮时数字加一。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计数器</title>
</head>
<body><div id="counter">0</div><button id="incrementBtn">加一</button><script>let counterDiv = document.getElementById('counter');let button = document.getElementById('incrementBtn');let count = 0;button.addEventListener('click', function() {count++;counterDiv.textContent = count;});</script>
</body>
</html>