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

Part3-DOM学习笔记-操作元素

news 2025/8/30 7:22:46

5.操作多个元素

5.1 排他思想

前面所述均为操作一个元素，给一个元素注册事件，如果是一组元素，就需要用循环的方式给元素注册事件。

我们想要给当前的元素实现某种样式，而其他的元素没有这个样式，这就需要用到排他思想。

例如，一组按钮中，点击了一个按钮后这个按钮会变成绿色，当再点其他按钮的时候，这个变色的按钮就会回复原来的颜色，选中的按钮变绿色。如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1.获取所有元素let btns = document.querySelectorAll("button");// btns是伪数组// 2.注册事件for(let i = 0;i < btns.length; i++){btns[i].onclick = function(){// 先把所有的按钮背景颜色去掉for(let i = 0;i < btns.length; i++){btns[i].style.backgroundColor = '';}// 再给选中的按钮背景颜色改成绿色this.style.backgroundColor = 'green';}}</script>
</body>
</html>

实现效果如下：

循环排他思想算法总结如下：

所有元素全部清除样式
给当前元素设置样式
以上顺序不能颠倒
简单总结为，先干掉其他人，留下我自己
首先排除其他人，汤后才设置自己的样式，这种排除其他人的思想我们称为排他思想

5.2 模拟换肤效果案例

如下代码示例，当点击主题名称时，页面会变成响应的背景，同时当前主题对应的主题名称前面会有小圆点。

<body><div><div>主题名称</div><ul><li>香水迷情</li><li>游戏人间</li><li>秋叶黄金</li><li>真爱永恒</li></ul></div><div class="main"><form action="#">账号:<input type="text"><br>密码:<input type="password"><br><div>登录</div><div>注册</div>    </form></div><script>// 1.获取元素let lis = document.querySelectorAll('li');////定义数组，此列表在实际开发中应该是在服务器中获取的，包括页面结构中的li标签的内容也应该是在服务器中获取，此处简化处理let imgs = ["./img/01.png","./img/02.png","./img/03.png","./img/04.png"]for(let i=0;i<lis.length;i++){// 排他思想            lis[i].onclick = function(){for(let i=0;i<lis.length;i++){lis[i].style.listStyleType = "none";}document.body.style.backgroundImage = "url("+imgs[i]+")";document.body.style.color = 'rgb(255,255,255)';this.style.listStyleType = "disc";}}</script>
</body>

效果如下：

5.3 表格隔行变色效果

如下代码，先定一个类名的样式，在js中通过注册鼠标划过和离开的事件，给元素添加类名来实现

/* 定义类名样式 */
.bg{background-color:rgb(147, 183, 188);
}

<script>// 1.获取元素let trs = document.querySelector('tbody').querySelectorAll('tr')// 利用循环，注册事件for(let i = 0;i < trs.length; i++){// 3.鼠标经过事件trs[i].onmouseover = function(){this.className = "bg";};// 4.注册鼠标离开事件trs[i].onmouseout = function(){this.className = "";}}
</script>

实现效果如下：

5.4 全选/取消全选案例

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>全选取消全选案例</title><style>table{width: 400px;height: 200px;border-spacing: 0;border-collapse:collapse;}thead{background-color: rgb(151, 148, 133);height: 30px;line-height: 30px;}th,td{border: 1px solid rgb(186, 186, 186);text-align: center;}</style></head>
<body><table><thead><tr><th><input type="checkbox" id="check_all"></th><th>商品</th><th>价格</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>iphone 15</td><td>8999.00</td></tr><tr><td><input type="checkbox"></td><td>小米14</td><td>3999.00</td></tr><tr><td><input type="checkbox"></td><td>联想笔记本电脑</td><td>5999.00</td></tr><tr><td><input type="checkbox"></td><td>华为手机</td><td>7999.00</td></tr></tbody></table><script>// 1.获取元素let checkAll = document.querySelector('#check_all'); let checks = document.querySelector('tbody').querySelectorAll('input');// 2.注册事件checkAll.onclick = function(){// this.checked 可以得到当前复选框的选中的状态for(let i = 0;i < checks.length;i++){checks[i].checked = this.checked;}}for(let i = 0;i < checks.length;i++){checks[i].onclick = function(){// flag控制全选按钮是否选中let flag = true;// 每次点击下面的复选框都要循环检查4个小按钮是否全被选中for(let i = 0;i < checks.length;i++){if(checks[i].checked == false){flag = false;}}checkAll.checked = flag;}}</script>
</body>
</html>