江苏新有建设集团有限公司官方网站微信小程序开发公司
如何用 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>
7. 总结与最佳实践
- 获取元素：可以通过
getElementById()、querySelector()等方法获取 DOM 元素。 - 修改元素：可以使用
textContent、setAttribute()、style等方法修改元素的内容、属性和样式。