文章目录
- 一、多元素操作案例
- 1、案例需求 - 多选一互斥按钮案例
- 2、案例核心要点 - getElementsByTagName 方法获取多个元素
- 3、案例核心要点 - 实现策略
- 4、完整代码示例
之前的 JavaScript 中使用 DOM 操作元素 , 都是 操作 单个元素 , 从本篇博客开始进行多元素的操作 ;
一、多元素操作案例
1、案例需求 - 多选一互斥按钮案例
实现如下效果 , 页面中有多个按钮 , 点击一个按钮 , 本按钮高亮显示 , 将其它按钮重置 ;
2、案例核心要点 - getElementsByTagName 方法获取多个元素
通过调用 Document 对象 或 Element 对象的 getElementsByTagName 方法 , 可以得到一个 HTMLCollection 对象 , 这是一个 伪数组 , 可通过数组下标获取 DOM 对象 ;
getElementsByTagName 函数原型如下 :
HTMLCollection getElementsByTagName(String tagName);- tagName 参数 : 元素的标签名称 , 表示要查找的元素的标签名 , 该参数是不区分大小写 ;
- 返回一个 HTMLCollection 对象 , 这是一个动态更新的集合 , 包含了所有匹配的元素 , HTMLCollection 类似于数组 , 但它并不是一个真正的数组 , 无法使用数组的许多方法 , 可以使用数组下标访问 Element 元素 ;
HTMLCollection 是 实时集合 , 也就是 如果该方法被调用后 , 文档结构发生了改变 , 那么 HTMLCollection 集合中的元素 , 也要跟着更新 ;
调用 document.getElementsByTagName('button') 代码 , 可以获取 文档中所有的 button 标签 ,
// I. 获取所有 button 标签元素
// getElementsByTagName 函数 的 返回值是 NodeList 对象 ,
var buttons = document.getElementsByTagName('button');通过 buttons[i] 可以获取指定的 第 i 个 元素 ;
3、案例核心要点 - 实现策略
总共三个 <button> 按钮 , 通过 document.getElementsByTagName('button') 可以获取这三个按钮 ;
互斥按钮效果 , 按下任意一个按钮之后 , 把三个按钮都设置为默认的状态 , 然后再将本次点击的按钮设置为高亮状态 ;
在循环中 , 设置该效果 :
// II. 为每个 按钮 设置点击事件 , 每个点击事件都是设置所有按钮为默认背景 , 本按钮高亮显示
// buttons 是 NodeList 对象 , 该对象是 伪数组
// 可使用数组下标获取每个 按钮元素
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
// 1. 设置所有按钮的背景为默认背景
for (var i = 0; i < buttons.length; i++) {
// 设置默认背景
buttons[i].style.backgroundColor = '';
}
// 2. 设置本按钮的背景为高亮显示
this.style.backgroundColor = 'green';
}
}
4、完整代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Style Operation Example</title>
<style>
* {
/* 取消默认内外边距样式 */
margin: 0;
padding: 0;
}
div {
/* 设置宽度即可 , 高度使用内部的 子元素自动填充 */
width: 300px;
margin: 100px auto;
}
button {
/* 设置按钮样式 , 左浮动从左到右头放置 */
float: left;
width: 80px;
height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</div>
<script>
// I. 获取所有 button 标签元素
// getElementsByTagName 函数 的 返回值是 NodeList 对象 ,
var buttons = document.getElementsByTagName('button');
// II. 为每个 按钮 设置点击事件 , 每个点击事件都是设置所有按钮为默认背景 , 本按钮高亮显示
// buttons 是 NodeList 对象 , 该对象是 伪数组
// 可使用数组下标获取每个 按钮元素
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
// 1. 设置所有按钮的背景为默认背景
for (var i = 0; i < buttons.length; i++) {
// 设置默认背景
buttons[i].style.backgroundColor = '';
}
// 2. 设置本按钮的背景为高亮显示
this.style.backgroundColor = 'green';
}
}
</script>
</body>
</html>运行效果 :
进入后 , 默认状态如下 :
点击按钮 1 , 按钮 1 高亮 ;
点击 按钮 3 , 按钮 1 高亮取消 , 按钮 3 高亮 ;
完整的动态效果如下 :
