【Web APIS】03-操作元素

SevgiliD

已于 2022-07-29 15:10:37 修改

阅读量133

点赞数

分类专栏： JavaScript初级文章标签：前端 javascript html

于 2022-07-21 17:01:32 首次发布

本文链接：https://blog.csdn.net/SevgiliD/article/details/125914617

版权

JavaScript初级专栏收录该内容

30 篇文章 0 订阅

订阅专栏

DOM-操作元素

操作元素

操作元素

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

改变元素内容

innerText
innerHTML

innerText和innerHTML的区别

在这里插入图片描述

案例-点击显示系统时间

<style>
        div,p {
            width: 300px;
            height: 30px;
            background-color: pink;
            color: #fff;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <button>点击显示系统时间</button>
    <div>某个时间</div>
    <p>261613</p>
    <script>
      
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function(){
            // div.innerText = '2022-7-21';
            div.innerText = getTime();
            
        }
        function getTime (){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var day = date.getDay();
        var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        return ('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);
        }
        //修改元素内容，元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerText = getTime();
        // innerText和innerHTML的区别
        // 1.innertext不识别标签，innerHTML保留标签，换行和空格；这俩属性都是可读写的
            
    </script>
</body>

修改常见元素属性

在这里插入图片描述

修改元素属性示例：

修改元素属性：点击安妮切换不同图片
在这里插入图片描述

 <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <button id="qyc">犬夜叉</button>
    <button id="gw">戈薇</button><br>
    <img src="../../images/qyc.jpg" alt="" title="犬夜叉">
    <script>
    // 修改元素属性
    // 获取元素
    var qyc = document.getElementById('qyc');
    var gw = document.getElementById('gw');
    var img = document.querySelector('img');
    // 注册事件，处理程序
    qyc.onclick = function(){
        img.src = '../../images/qyc.jpg';
        img.title = '犬夜叉';
    }
    gw.onclick = function(){
        img.src = '../../images/gw.jpg';
        img.title = '戈薇';
    }
    </script>
</body>

案例-分时问候

<style>
        img{width: 250px;}
    </style>
    
</head>
<body>
    <img src="../../images/morning.jpg" alt="">
    <div>上午好</div>
    <script>
        // 分时问候并显示不同的图片案例
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2.得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        // 3.判断时间段
        if(h<12){
            img.src = '../../images/morning.jpg';
            div.innerHTML = '上午好，小老弟，今天敲代码了吗';
        }else if(h<16){
            img.src = '../../images/noon.jpg';
            div.innerHTML = '下午好呀，铁汁，这么热的天吃雪糕了吗';
        }else{
            img.src = '../../images/night.jpg';
            div.innerHTML = '晚上好，宝~';
        }
    </script>
</body>

修改表单元素属性

利用DOM操作如下表单属性
在这里插入图片描述

修改表单元素属性示例

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件 处理程序
        btn.onclick = function(){
            input.value = '我被点击了';
            // 设置按钮只能被点击一次 disabled(禁用)
            // btn.disabled = true;
            this.disabled = true;
            // this指向的是事件函数的调用者btn
            
        }
    </script>
</body>

案例-显示/隐藏密码明文

点击右侧小眼睛可来会切换显示状态（非placeholder且当前部分浏览器已自带此功能）

在这里插入图片描述

案例代码：

<style>
        .box{
            width: 400px;
            /* 只留下边框 */
            border-bottom: 1px solid #ccc;
            margin: 400px auto;
            
        }
        .box input{
            width: 370px;
            height: 30px;
            /* 去掉input边框 */
            border: 0;
            outline: none;
        }
        .box img{
            width: 26px;
            float: right;
            padding: 2px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for=""></label>
        <input type="password" placeholder="请输入密码">
        <img src="../../images/eye.png" alt="">
    </div>
    <script>
        // 点击眼睛图片变化并文本框可见(如今部分浏览器已经自带眼睛切换可见)
        // 1.获取元素
        var img = document.querySelector('img');
        var input = document.querySelector('input');
        // 2.注册事件 处理程序
        var flag = 0;
        img.onclick = function (){
            if(flag==0){
            img.src = '../../images/eye2.png';
            input.type = 'text'; 
            flag = 1;
            }else{
            img.src = '../../images/eye.png';
            input.type = 'password'; 
            flag = 0;
            }
         
        }

    </script>
</body>

修改样式属性

通过JS修改元素的大小，位置，颜色等样式
在这里插入图片描述

修改样式属性示例

点击图片后，颜色大小位置均发生变化；代码示例：

 <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .change{
            background-color: purple;
            width: 300px;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="first"></div>
    <script>
    // 1.通过element.style获得修改元素样式；适用于样式较少，功能简单的情况下使用
        // 修改样式属性：点击盒子颜色改变，宽度改变
        // 获取元素
        var div = document.querySelector('div');
        div.onclick = function(){
            // div.style
            // this.style.backgroundColor = 'purple';
            // this.style.width = '300px';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
        
        // 注意点：
        //      -JS里面的样式采取驼峰命名法；如backgroundColor
        //      -js修改style里的样式产生的是行内样式，css权重较高
    
    // 2.通过修改classname更改元素的样式，适用于样式较多功能个复杂的情况
        this.className = 'change';
    // 3.想要保留原来的类名，使用多类名选择器即可;不适用则直接会覆盖原类名
        // this.className ='first change';
        }
    </script>
</body>

案例1：仿淘宝关闭二维码案例

效果：点击x可关闭二维码
在这里插入图片描述

案例代码：

<style>
        .qr{
            width: 74px;
            height: 88px;
            text-align: center;
            margin: 200px auto;
            position: relative;
            color: #ff5000;
            border: 1px solid #ccc;
        }
        .qr img{
            width: 62px;
        }
        .qr span{
            line-height: 20px;
            font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
           
        }
        .btn{
            position: absolute;
            width: 14px;
            border:1px solid #ccc;
            top: 0;
            left: -15px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="qr">
        <span>下载淘宝</span>
        <img src="../../images/TB二维码.png" alt="">
        <div class="btn">X</div>
        <script>
            // 点击btn隐藏二维码
            // 1.获取元素
            var qr = document.getElementsByClassName('qr');
            var btn = document.getElementsByClassName('btn');
            console.log(btn);
            // 2.注册事件 处理程序
            btn[0].onclick = function(){
                qr[0].style.display = 'none';
            }
        </script>
    </div>
</body>

案例2：循环精灵图

在这里插入图片描述
代码示例：

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 300px;
            list-style: none;
            margin: 60px auto;
        }
        
        li {
            float: left;
            width: 35px;
            height: 35px;
            margin: 15px;
            background-color: pink;
            /* background: url(../../images/JL.png) no-repeat; */
        }
    </style>
</head>
<body>
        <ul class="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    
    <script>
       // 1. 获取元素 所有的小li 
            var lis = document.querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {
                // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
                var index = i * 44;
                lis[i].style.backgroundPosition = '0 -' + index + 'px';
            }
    </script>
    
</body>

案例3：显示隐藏文本框内容

在这里插入图片描述

此处涉及：onfocus获取焦点事件和onblur失去焦点事件
代码示例：

<style>
        input{
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        // 注册事件，获得焦点事件onfocus
        text.onfocus = function(){
            if(this.value === '手机'){
                this.value = '';
            }
            // 获得焦点需要把文本框里的字颜色变黑
            this.style.color = '#333';
        }
        // 注册事件，失去焦点事件 onblur
        text.onblur = function(){
            if(this.value === ''){
                this.value = '手机';
            }
             // 失去焦点需要把文本框里的字颜色变浅
             this.style.color = '#999';
        }
        
        
    </script>
</body>

案例4：密码框格式提示错误信息

在这里插入图片描述

案例思路：

在这里插入图片描述

案例步骤：

1.写好基本样式并获取元素；2.分别绑定获得焦点和失去焦点事件；3.在事件处理程序中进行绑定表单value值的length判断；4.在css中添加类名并在其中写好if为false时的css样式；5.根据判断条件执行语句用className覆盖文本样式

核心代码：

SevgiliD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web APIS】03-操作元素

（dom）操作元素：修改元素内容，innerHTML/innertext；修改常见元素属性，src，href，title等；操作表单元素的属性，type，value，disable等；操作元素样式属性，classname；仿淘宝关闭二维码案例，显示隐藏文本框内容案例，密码框提示错误信息案例，精灵图循环案例......
复制链接

扫一扫