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

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>Documenttitle>
head>
<body>
    <button>按钮1button>
    <button>按钮2button>
    <button>按钮3button>
    <button>按钮4button>
    <button>按钮5button>
    <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>

效果如下:

Part3-DOM学习笔记-操作元素_第1张图片

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>

实现效果如下:

Part3-DOM学习笔记-操作元素_第2张图片

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 15td>
                <td>8999.00td>
            tr>
            <tr>
                <td><input type="checkbox">td>
                <td>小米14td>
                <td>3999.00td>
            tr>
            <tr>
                <td><input type="checkbox">td>
                <td>联想笔记本电脑td>
                <td>5999.00td>
            tr>
            <tr>
                <td><input type="checkbox">td>
                <td>华为手机td>
                <td>7999.00td>
            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>

实现效果如下:

Part3-DOM学习笔记-操作元素_第3张图片

你可能感兴趣的:(学习,笔记,javascript,DOM,操作元素,前端,JS)