JavaScript脚本语言 -DOM - 事件基础与操作元素细节

已于 2022-01-21 13:11:53 修改
阅读量1.1k 收藏 2
点赞数 3
分类专栏： 成长阶段 笔记 文章标签： javascript 前端 html
于 2022-01-20 15:07:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123467/article/details/122601965
版权

文章目录

事件基础（三要素）

  • JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

简单理解：触发—响应机制

  • 网页中的每个元素都可以产生某些可以触发JavaScript的事件，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

1.事件源

事件被触发的对象 谁 按钮

<body>
    <button id="button">涛涛</button>
    <script>  
        var b = document.getElementById('button');

    </script>
</body>

2.事件类型

事件类型 如何触发 什么事件 比如鼠标点击（onclick） 还是鼠标经过 还是键盘按下

3.事件处理程序

时间处理程序 通过一个函数赋值的方式 完成

<body>
    <button id="button">涛涛</button>
    <script>  
        var b = document.getElementById('button');
        b.onclick = function(){
            alert('点我啊！！');        //点完按钮后弹出，点我啊！！
        }
    </script>
</body>

处理事件思路（代码举例）

  1. 获取事件源
  2. 注册事件（绑定事件）
  3. 添加事件处理程序
<body>
    <div>涛涛</div>>
    <script>  
        //执行事件步骤
        //目标：点击div控制台输出  我被选中了
        //1.获取事件源
        var a = document.querySelector('div');

        //2.注册事件（绑定事件）
        //div.onclick

        //3.添加事件处理程序
        a.onclick = function(){
            console.log('我被选中了');
        }
    </script>
</body>

常见的鼠标事件

鼠标事件触发条件
onclick鼠标点击左键触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发

操作元素（DOM核心）

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

改变元素内容（innerText）

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

<body>
    <button>显示当前时间</button>
    <div>某个时间</div>
    <script>  
        //当我们点击了按钮，div里面的文字会发生变化
        //1.获取元素
        var a = document.querySelector('button');
        var b = document.querySelector('div');

        //2.注册事件
        a.onclick = function(){
            b.innerText = 'ff';
        }
    </script>
</body>

案例1

<style>
    div{
        color:red;    
    }
</style>
<body>
    <button>显示当前时间</button>
    <div>某个时间</div>
    <script>  
        //当我们点击了按钮，div里面的文字会发生变化
        //1.获取元素
        var a = document.querySelector('button');
        var b = document.querySelector('div');

        //2.注册事件
        a.onclick = function(){
            b.innerText = getDate();
            console.log(b)
        }

        function getDate(){
            var date = new Date();
            console.log(date.getFullYear());    
            console.log(date.getMonth() + 1);   //返回的月份小一个月
            console.log(date.getDate());    //返回几号
            console.log(date.getDay()); //周一返回1  周六返回的是 6 但是周日返回的 0

            //我们写一个 2022年 1月 20日  星期四
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>
</body>

案例2

<body>
    <p>显示时间</p>
    <script>  

        //获取元素
        var a = document.querySelector('p');
        
        //注册事件
        
        a.innerText = getDate();

        function getDate(){
            var date = new Date();

            //我们写一个 2022年 1月 20日  星期四
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>
</body>

改变元素内容（innerHTML）

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

Text和HTML区别

案例1

<body>
    <div></div>
    <script>
        //innerText 和 innerHTML的区别
        //1.innerText   (非标准)
        var a = document.querySelector('div');
        a.innerText = '<strong>今天是：</strong>2022';      //无法使用html标签
        
        //2.innerHTML   (W3C标准)
        a.innerHTML = '<strong>今天是：</strong>2022';      //可以使用html标签
    </script>
</body>

案例2

<body>
    <p>
        我是文字
        <span>123</span>
    </p>

    <script>

        var c = document.querySelector('p');
        console.log(c.innerText);       //我是文字123
        console.log(c.innerHTML);       //返回的HTML文档格式
    </script>
</body>

请添加图片描述

常用元素的属性操作

  1. innerText，innerHTML改变元素内容
  2. src、href
  3. id、alt、title

案例

<body>
    <button id="ldh">攻略</button>
    <button id="zxy">笔记</button> <br>
    <img src="jjj.jpg" alt="">

    <script>
        //修改元素属性
        //1.获取元素
        var a1 = document.getElementById('ldh');
        var a2 = document.getElementById('zxy');
        var img = document.querySelector('img');
        
        //2.注册事件  处理程序
        a2.onclick = function(){
            img.src = 'jing2.jpg';
            img.title = '笔记';
        }
        a1.onclick = function(){
            img.src = 'jjj.jpg';
            img.title = '攻略';
        }

    </script>
</body>

表单元素的属性操作

  • 利用DOM可以操作如下表单元素的属性:

type、value、checked、selected、disabled

请添加图片描述

案例（仿京东显示密码）

  • 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
  • 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
  • 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0，就切换为密码框，flag设置为1
实现样式
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position:relative;
            width:400px;
            border-bottom:1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width:370px;
            height:30px;
            border:0;
            outline: none;
        }
        .box img{
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
            
        }
    </style>
</head>


<body>

    <div class="box">
        <lablel for=""></lablel>
            <img src="emo.jpg" alt="">
        <input type="password" name="" id="">
    </div>
    <script>

        

    </script>
</body>
实现功能
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position:relative;
            width:400px;
            border-bottom:1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width:370px;
            height:30px;
            border:0;
            outline: none;
        }
        .box img{
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
            
        }
    </style>
</head>


<body>

    <div class="box">
        <lablel for=""></lablel>
            <img src="emo.jpg" alt="" id="eye">
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //1.获取元素
        var a = document.getElementById('eye');
        var b = document.getElementById('pwd');
        
        //2.注册事件 处理程序
        var flag = true;
        a.onclick = function(){
            if(flag == true){
                b.type = 'text';
                a.src = 'emo2.jpg';
                flag = false;
            }else{
                b.type = 'password';
                a.src = 'emo.jpg';
                flag = true;
            }
            
        } 

    </script>
</body>

学习网页中控制页面元素

请添加图片描述

样式属性操作

我们可以通过js修改元素的大小、颜色、位置等样式

1.element.style //行内样式操作

1.行内样式代码举例（element.style）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color:aqua;    
        }
    </style>
</head>


<body>
    <div></div>
    <script>
        //1.获取元素
        var a = document.querySelector('div');
        
        //2.注册事件 处理程序
        a.onclick = function(){
            //div.style里面的属性采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '400px';
        }
    </script>
   
</body>

注意

  • JS里面的样式采取驼峰命名法，比如 fontSize，backgroundColor

  • JS修改 style 样式操作，产生的是行内样式，css权重比较高

请添加图片描述

案例一（淘宝点击关闭二维码）

当鼠标点击二维码关闭按钮的时候，则关闭整个二维码

思路
  1. 利用样式的显示和隐藏完成，display：none隐藏元素 display：block显示元素
  2. 点击按钮，就让这个二维码盒子隐藏起来即可
代码
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .box{
            position:relative;
            width: 500px;;
            height:auto;
            border:1px solid #ccc;
            margin:100px auto;
            font-size:12px;
            text-align:center;
            color:#f40;
            display: block;
            
        }
        .box img{
            width: 500px;
            magin-top: 5px;
        }
        .close-btn{
            position:absolute;
            top:-1px;
            left: -16px;
            width: 14px;
            height:14x;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial,Arial, Helvetica, sans-serif;
            cursor:pointer;
            
        }
    </style>
</head>


<body>
    <div class="box">
        我的小镜<br>
        <img src="jing.jpg" alt="">
        <i class='close-btn'>x</i>
    </div>
    <script>
        //1.获取元素
        var a = document.querySelector('.box');
        var b = document.querySelector('.close-btn');
        
        //2.注册事件 处理程序
        b.onclick = function(){
            a.style.display = 'none';
        }
    </script>
   
</body>

请添加图片描述

案例二（显示隐藏文本框内容）

  1. 获得焦点（onfocus）
  2. 失去焦点（onblur）
<body>
    <input type="text" value="手机">
   <script>
       //1.获取元素
       var a = document.querySelector('input');
       
        //2.注册事件 获得焦点事件 onfocus
        a.onfocus = function(){
            console.log('你得到了焦点');
            if(a.value == '手机'){
                a.value = '';
            }
            //获得焦点需要把文本框里面的文字颜色变黑
            this.style.color = 'red';
        }

        //3.注册事件 失去焦点事件 onblur
        a.onblur = function(){
            console.log('你失去了焦点');
            if(a.value == ''){
                this.value = '手机';
            }
            //失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    
   </script>
</body>

请添加图片描述

2.类名样式操作 element.className

引出类名样式操作
<style>
    div{
        width: 50px;
        height: 50px;
        border:1px solid;
    }

</style>
</head>

<body>
    <div>文本</div>
    
   <script>
       //1.使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
       var test = document.querySelector('div');
       test.onclick = function(){
               this.style.backgroundColor = 'purple';
               this.style.color = '#fff';
               this.style.fontSize = '25px';
           
       }
    
   </script>
</body>
使用类名操作改进
<style>
    div{
        width: 50px;
        height: 50px;
        border:1px solid;
    }
    .change{
        background-color: purple;
        color:#fff;
        font-size:25px;
    }

</style>
</head>

<body>
    <div>文本</div>
    
   <script>
       //1.使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
       var test = document.querySelector('div');
       test.onclick = function(){
            //    this.style.backgroundColor = 'purple';
            //    this.style.color = '#fff';
            //    this.style.fontSize = '25px';
       //2.我们可以通过 修改元素的className更改元素的样式 适用于样式较多或者功能复杂的情况
           this.className = 'change';
       }
    
   </script>
</body>
重要细节（类覆盖）
<style>
    div{
        width: 50px;
        height: 50px;
        border:1px solid;
    }
    .change{
        background-color: purple;
        color:#fff;
        font-size:25px;
    }
    .first{
        color:red;
    }

</style>
</head>

<body>
    <!-- 注意：此时div引进一个类 -->
    <div class="first">文本</div>
    
   <script>
       var test = document.querySelector('div');
       test.onclick = function(){
        //注意：this.className会覆盖原先的类
           this.className = 'change';
           
        //注意：如果想要保留原先的类名，我们可以用多类名选择器
           this.classNmae = 'first change';
       }
    
   </script>
</body>
案例（密码验证）

信息验证
在这里插入图片描述

<style>
    .ipt{

    }
    div{
        width:300px;
        height:100px;
        margin:250px auto;
    }
    .message{
        font-size: 10px;
    }
    .wrong{
        color:red;
    }
    .right{
        color:aqua;
    }
</style>
</head>

<body>
    <div>
        <input type="text" class = "ipt">
        <p class = "message">请输入6-16位密码</p>
    </div>
    
   <script>
       //1.获取元素
       var t = document.querySelector('.ipt');
       var s = document.querySelector('.message');
       
    //    2.注册事件
       t.onblur = function(){
           if(this.value.length < 6 || this.value.length > 16){
               console.log('错误');
               s.className = 'message wrong';
            s.innerHTML = '你输入的位数不对';
           }else{
               s.className = 'message right';
               s.innerHTML = 'Clear!';
           }
       }

    
   </script>
</body>
鬼鬼骑士
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
JavaScript驾驭网页－DOM
12-03
一、DOM全称 文档对象模型（Document Object Model） ...DOM提供对脚本友善的网页结构与内容的视图 DOM把网页视为节点构成的层次树 DOM树 每棵DOM树的最顶端节点都是Document，它在HTML节点的上层
04-JavaScript脚本语言基础（二）DOM（L）
07-14
04-JavaScript脚本语言基础（二）DOM（L）
购物页面点叉号二维码隐藏的做法
weixin_51415327的博客
09-01 470
隐藏此二维码 <!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"> <ti.
JavaScript基础、DOM以及BOM笔记（二）
c1400612901的博客
06-07 406
JavaScript基础、DOM以及BOM笔记
Javascript学习三——操作DOM
qq_57985179的博客
10-11 179
目录 一、使用节点 （1）节点类型 （2）节点名称与值及其关系 （3）访问和操作节点 二、使用文档节点 （1）访问文档子节点 （2）访问文档信息、元素和集合 三、使用元素节点 一、使用节点 （1）节点类型 DOM规定整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是节点文本，元素的属性是一个属性节点，注释属于注释节点，如此等等。 （2）节点名称与值及其关系 使用节点的nodeName和node Value属性可以读取节点的名称和值。 DOM把....
JavaScript学习DOM、页面元素的获取、事件、操作元素
芋泥啵啵月亮的博客
08-07 285
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM) 。 DOM就是一个编程接口，处理可扩展标记语言(HTML或XML)。通过DOM接口，可以改变网页的内容、结构和样式。 一个页面就是一个文档。用document表示。 页面中的所有标签就是元素，用element表示。 页面中的所有内容都可以看作是节点(标签、属性、文本和注释)，用node表示。 获取元素 根据ID获取 使用getElementById()的方法获取。注意括号中的参数需要是字符串。返回的是一个DOM elem.
JavascriptDOM操作页面元素
yyjiuguilian的博客
01-18 1298
Document 是window的一个重要属性 document.documentElement 获取的DOM节点是html元素 document.getElementsByTagName(‘html’)[0] 获取的DOM节点也是html元素 document.body 获取的DOM节点是body元素。 访问元素的行内样式 任何支持 style 特性的 HTML元素在 JavaScript ...
facebook-scripts-dom-manipulation:一个开源项目包含许多脚本，这些脚本通过直接操作DOM不需要Facebook用户访问令牌
04-22
Facebook脚本DOM操作该存储库包含许多脚本，通过直接操作DOM，Facebook用户不需要访问令牌。安装无需安装。用法遵循每个脚本开头的指导。 几乎所有脚本都不需要任何手动更改，只需在直接运行代码。 注意：请复制所有...
long-press-event:在纯JavaScript的1k中向DOM添加`long-press`事件
05-02
1k脚本，它使用和纯JavaScript向DOM中添加了一个long-press事件。 可在IE9 +，Chrome，Firefox，Safari和流行的移动浏览器（包括Cordova （电话间隔）应用程序）中使用。 默认为1.5秒，但可以通过向元素添加data-...
05-DOM基础.pptx
07-06
JavaScript课件PPT，JS教学资料，JS学习素材
HTML DOM 事件
akuibpt23191的博客
07-13 540
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
JavaScript DOM操作
好好学习天天向上
03-27 5007
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
js淘宝点击关闭二维码案例
qq_44156869的博客
11-15 929
案例：淘宝点击关闭二维码 当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。 案例分析： 核心思路：利用样式的显示和隐藏完成，display:none 隐藏元素 display：block显示元素 点击按钮，就让这个二维码盒子隐藏起来即可。 例子： <head> <style> .box { position: relative; width:74px; height: 88px;
Javascript-DOM操作
码农_杨sir的博客
04-14 218
title: Javascript_DOM操作 tags: JavaScript DOM HTML cover: ‘https://cdn.jsdelivr.net/gh/yang-sir-one/yangimg/JS.png’ abbrlink: 39553 date: 2022-03-18 08:37:56 Javascript_DOM操作 一、关于Javascript与DOM 1.JavaScript JavaScript简称JS，是一种解释型脚本语言。 JavaScript是一种轻量级编程语.
JavaScript与DOM编程
寻梦&之璐
05-05 6105
文章目录JS简介常量与变量 JS简介 JS是一种在浏览器中运行的解释性脚本语言。JS是由ES（ECMAScript），DOM（文档对象模型），BOM（浏览器对象模型）组成 ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，是让JS运行在服务端的开发平台，它使得JS成为与PHP，Py
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 121
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 200
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 242
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 760
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
javascript语言
05-26
5. 高互动性：JavaScript可以通过操作DOM来实现网页的动态效果和交互功能，比如用户可以通过JavaScript来响应按钮点击事件等。 6. 开放性：JavaScript是一种开放标准，并且支持跨平台使用，可以在多种操作系统上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值