前端学习笔记-JS-DOM-操作元素_setattribute是直接覆盖类名吗-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36434637/article/details/100829252

本文深入讲解JavaScript如何通过DOM操作元素，包括改变元素内容、属性、样式及表单操作，涵盖事件处理、样式修改、表单事件及元素属性管理，通过实例演示了排他思想、百度换肤效果及表单全选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作元素

JavaScript可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

改变元素内容

element.innerText

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,
        p{
            width: 300px;
            height: 20px;
            background: pink;
            color: white;
        }
    </style>
</head>
<body>
<button>点击显示当前时间</button>
<div>13</div>
<p></p>
<script>
    // 当我们点击了按钮，  div里面的文字会显示当前时间
    // 1.获取元素 对象
    var btn=document.querySelector('button');
    var div=document.querySelector('div');
    // 触发事件处理程序
    btn.onclick=function () {
        div.innerText=getTime();
    };
    function getTime() {
         var date = new Date();
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var date2=date.getDate();
        //因为星期天是 0 使用可以利用一个数组将 getDay()返回的值 转换成中文数字
        var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day=date.getDay();
        return '今天是'+year+'年'+month+'月'+date2+'日 '+arr[day];
    }
    //  我们元素可以不用添加事件 但是还是要先获取元素对象
    var p=document.querySelector('p');
    p.innerText=getTime();

</script>
</body>
</html>

从起始位置到终止位置的内容，但它去除Html标签，同时空格和换行也会去掉
innerText不识别HTML标签
可读写的，可以获取元素里面的内容

element.innerHTML W3C推荐使用

从起始位置到终止位置的全部内容，包括Html标签，同时保留空格和换行
能识别HTML标签
可读写的，可以获取元素里面的内容

修改元素属性

常用元素的属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 200px;
        }
    </style>
</head>
<body>
<button id="xsy">小糸侑</button>
<button id="qhdz">七海灯子</button>
<br />
<img src="images/xsy.jpg" title="小糸侑"/>
<script>
    //获取元素
    var xsy=document.getElementById('xsy');
    var qhdz=document.getElementById('qhdz');
    var img=document.querySelector('img');
    //触发事件处理程序
    qhdz.onclick=function () {
        img.src='images/qhdz.jpg';
        img.title='七海灯子'
    };
    xsy.onclick=function () {
        img.src='images/xsy.jpg';
        img.title='小糸侑'
    }
</script>
</body>
</html>

修改表单属性

<body>
<button>请点击</button>
<input type="text" value="请输入内容"/>
<script>
    //获取事件元素
    var btn=document.querySelector('button');
    var inp=document.querySelector('input');
    // 2. 注册事件 处理程序
    btn.onclick=function () {
         // 表单里面的值 文字内容是通过 value 来修改的
        inp.value='被点击了';
        // btn.disabled=true;
        // this 指向的是事件函数的调用者 btn
        this.disabled=true;
    }
</script>
</body>

案例：仿京东显示密码，点击按钮将密码框显示为文本框，并可以查看密码明文

算法：利用一个flag变量，如果是1就切换为文本框，如果是0就切换为密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 450px;
            margin: 200px auto;
            border-bottom: 1px solid #cccccc;
            position: relative;
        }

        .box input {
            width: 400px;
            height: 30px;
            border: 0;
            outline: none;

        }

        .box img {
            width: 24px;
            position: absolute;
            top: 6px;
            right: 10px;
        }
    </style>
</head>
<body>
<div class="box">
    <lable><img src="images/close.png" alt="" id="eye"></lable>
    <input type="password" id="pw"/>
</div>
<script>
    //获取元素
    var eye = document.getElementById('eye');
    var pw = document.getElementById('pw');
    var flag = 0;
    //注册事件 处理程序
    eye.onclick = function () {
        // 点击一次之后， flag 一定要变化
        if (flag == 0) {
            pw.type = 'text';
            this.src = 'images/open.png';
            flag = 1;
        } else {
            pw.type = 'password';
            this.src = 'images/close.png';
            flag = 0;
        }
    }

</script>
</body>
</html>

修改样式属性

element.style

行内样式操作，修改元素样式，如果样式比较少或者功能简单的情况下使用注意：

里面的属性是驼峰命名法
JS修改的是行内样式，权重比CSS的高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改行内样式</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
<div></div>
<!--里面的属性是驼峰命名法-->
<!--JS修改的是行内样式，权重比CSS的高-->
<script>
    //获取元素
    var div = document.querySelector('div');
    //注册事件 处理程序
    div.onclick = function () {
        this.style.backgroundColor = 'purple';
        this.style.width= '250px';
    }
</script>
</body>
</html>

表单事件

获得焦点 onfocus
失去焦点 onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿京东搜索框 显示隐藏文本框内容</title>
    <style>
        input {
            color: #999;
        }
    </style>
</head>
<body>
<input type="text" value="手机"/>
<script>
    //获取元素
    var text = document.querySelector('input');
    //获取焦点
    text.onfocus = function () {
        //元素.属性值 具有可读可写 属性
        if (this.value === '手机') {
            this.value = '';
        }
        this.style.color = '#333';
    };
    text.onblur = function () {
        if (this.value === '') {
            this.value = '手机';
            this.style.color = '#999';
        }

    }
    //注册事件 处理程序
</script>
</body>
</html>

element.className

类名样式操作，适合样式比较多的情况下使用，修改了元素的类名

注意：这个方法直接修改了类名，也就是说会覆盖原来的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    类名样式操作，适合样式比较多的情况下使用 修改了元素的类名-->
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .change{
            width: 250px;
            background: yellow;
            margin-top: 200px;
        }
    </style>
</head>
<body>
<div class="old"></div>
<!--1.先在style中写好需要修改的样式类-->
<!--2.然后通过element.className修改-->
<script>
    //获取元素
    var div=document.querySelector('div');
    //注册事件 处理程序
    div.onclick=function () {
        // 通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
        // 这个方法直接修改了类名，也就是说会覆盖原来的类名
        // div.className='change';
        // 若想旧的类名生效，可以采取 多类名 命名法
        div.className='old change';
    }
</script>
</body>
</html>

操作元素小总结

排他思想（算法）

两层循环，先排除其他人，然后再设置自己的样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>

案例：百度换肤效果

分析：

利用循环给一组元素注册点击事件
当鼠标经过一张图片，当前的页面背景换成经过的图片，鼠标移开之后，换回默认的
当点击了图片，当前的页面背景换成点击的图片
核心算法：把当前图片的src路径取过来，给body作为背景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

案例：表单全选取消全选

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

获取属性值

element.属性获取内置属性值（元素自带的属性）
element.getAttribute('属性') 主要获取自定义的属性（标准），我们定义的属性

设置属性值

element.属性 = '值'；
element.setAttribute('属性', '值') 主要更改自定义的属性

移除属性值

element.removeAttribute('属性') 主要移除自定义的属性（标准）

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
    </script>
</body>

Tab切换案例

分析：

一个大盒子，里面上下两个小盒子
上面的模块，点击某一个之后，这个的背景色是红色，其余的是灰色（排他思想）
点击某一个之后，显示这个模块对应的内容，其他的隐藏，这个要写到点击事件里面
下面的显示内容和上面的小 li 一一对应
核心思路：
- 给上面的tab_list 添加自定义属性，属性号从0开始
- 当点击上面的模块，下面对应的模块开始显示，其他的隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li 设置索引号 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

自定义属性

自定义属性目的：为了保存并使用数据，有些数据保存到页面中，为不是数据库中

设置自定义属性

但是有些自定义属性容易引以歧义，不容易判断是内置属性还是自定义属性，所以H5给我们新增了自定义属性 H5规定自定义属性以 “data-” 开头

获取H5自定义属性

兼容性：element.getAttribute('属性') 建议使用
H5新增：element.dataset.index 或者 element.dataset[ 'index' ]

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>