在前端开发中，JavaScript 是一种强大的工具，可以用来操作 HTML 文档，响应用户交互。本文将介绍如何使用 JavaScript 操作多个元素，在这个过程中，我们将创建一个多选一互斥按钮的案例，并使用 getElementsByTagName 方法获取 HTMLCollection 伪数组对象。
一、理解互斥按钮
互斥按钮的核心思想是允许用户在多个选项中只能选择一个。例如，当用户选择了一个选项后，之前选择的选项会自动取消。这种功能常见于单选按钮（radio button）和某些类型的按钮式选择。
二、创建基础 HTML 结构
首先，我们需要创建一个基础的 HTML 页面，包括若干个按钮供用户选择。我们将使用 <button> 标签来实现这一功能。下面是一个简单的 HTML 结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多选一互斥按钮</title>
<style>
.active {
background-color: #007BFF;
color: white;
}
</style>
</head>
<body>
<h1>请选择一个按钮：</h1>
<button class="btn">按钮 1</button>
<button class="btn">按钮 2</button>
<button class="btn">按钮 3</button>
<script src="app.js"></script>
</body>
</html>
三、实现按钮互斥功能的 JavaScript 代码
接下来，我们将编写 JavaScript 代码，以实现按钮的互斥选择。我们将在 app.js 文件中添加逻辑。
// app.js
document.addEventListener('DOMContentLoaded', function() {
// 获取所有的按钮
const buttons = document.getElementsByTagName('button');
// 将 HTMLCollection 转换为数组并遍历
Array.from(buttons).forEach(button => {
button.addEventListener('click', function() {
// 移除所有按钮的 active 类
Array.from(buttons).forEach(btn => {
btn.classList.remove('active');
});
// 添加 active 类到当前按钮
this.classList.add('active');
});
});
});
四、代码解释
在上面的 JavaScript 代码中，我们首先使用 document.addEventListener('DOMContentLoaded', ...) 确保 DOM 元素已经完全加载。接着，我们使用 getElementsByTagName('button') 方法获取页面中所有的按钮。这将返回一个 HTMLCollection 伪数组对象。
为了能够遍历这个 HTMLCollection，我们使用 Array.from() 方法将其转换为数组，然后为每个按钮添加点击事件监听器。当按钮被点击时，我们首先移除所有按钮的 active 类，确保只有一个按钮可以被选中。然后，给被点击的按钮添加 active 类，以便通过 CSS 表示其被选中状态。
五、总结
通过本文的介绍，我们实现了一个简单的多选一互斥按钮的功能。在这个案例中，我们学习了如何使用 getElementsByTagName 方法来获取一组元素，并使用事件监听器来管理它们的状态。这种方式可以广泛应用于各种需要用户交互的场景中，增强用户体验。
希望通过这个简单的例子，读者们能够更好地理解如何使用 JavaScript 来操作 DOM 元素，掌握基本的事件管理技巧，从而在前端开发中更得心应手。
