DOM事件

weixin_45787066

已于 2022-05-17 08:41:56 修改

阅读量95

点赞数

文章标签： javascript 前端 html

于 2022-05-16 22:29:20 首次发布

本文链接：https://blog.csdn.net/weixin_45787066/article/details/124808868

版权

DOM事件(操作元素部分)

这个土拍你在这里插入图片描述这个图片是黑马里面的侵删

1.操作元素内容

1.1 innerText

innerText不识别html标签非标准去除空格和换行

1.2 2.innerHTML

innerHTML 标签识别html标签 W3C标准

1.3 区别

这两个标签都是能获得元素里面的内容，并且是可读写的

1.4 代码

<body>
    <div></div>  
    <p>
        我是骚0
        <span>我不是</span>
    </p>
    <script>
        // innerTexr和innerHTMl的区别
        // innerText不识别html标签 非标准 去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong> 今天是 1<strong>';
        div.innerHTML = '<strong> 今天是 2<strong>';
        // 2.innerHTML 标签识别html标签 W3C标准
        // 这两个属性都是可读写的 可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerHTML);
        console.log(p.innerText);
    </script>
</body>

2.getElemenByID 和 getElementByTagName

2.1 getElemenByID

通过id获取元素的内容

<body>
    <div id="time">2022-9-9</div>
    <script>
    // 1.文档重上往下加载，所以script标签要写到下面
    //3.参数id区分大小写
    // 返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    // 5.console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);

    </script>
    
</body>

2.2 getElementByTagName

返回带有标签名的集合并且返回的是伪数组形式
如果标签底下只有一个值返回值仍然是伪数组形式
并且没有元素的情况下返回值仍然是伪数组形式

<body>
    <ul>
        <li>你好 你好1</li>
        <li>你好 你好2</li>
        <li>你好 你好3</li>
        <li>你好 你好4</li>
        <li>你好 你好5</li>
        <li>你好 你好6</li>
    </ul>

    <ol id="ol">
        <li>我好1，我好</li>
        <li>我好2，我好</li>
        <li>我好3，我好</li>
        <li>我好4，我好</li>
        <li>我好5，我好</li>
        <li>我好6，我好</li>
    </ol>
    <script>
        // 返回带有标签名的集合  
        // 1.返回的是获取过来元素对象的集合 以为数组的形式存储
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[2]);
        // 2.遍历这个伪数组
        for(var i = 0;i < lis.length;i++){
            console.log(lis[i]);
        }
        // 3.如果页面只有一个li返回值还是伪数组形式
        // 4.如果页面没有这个元素返回的是空的伪数组形式

        // 如果想获取ol下的li元素 可以先获取 ol的id 通过id获取li
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'))
        console.log(typeof ol)
        console.log("测试")
    </script>
</body

3.querySlector

该方法是h5新增的方法对一些浏览器不兼容
getElementsByClassName 根据类名获得某些元素集合
querySelector返回指定选择器的第一个元素切记里面的选择器需要加符号
querySlectorAll 返回所有的元素对象

<body>
    <div class="box"></div>
    <div class="box"></div>
    <div id="nva"> 
       <ul>
        <li>首页</li>
        <li>藏品</li>
    </ul> 
    </div>
    <script>
        // querySlector方法是h5新增的方法一些浏览器不兼容
        // 1.getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2.querySelector返回指定选择器的第一个元素 切记 里面的选择器需要加符号
        var fierstBox = document.querySelector('.box');
        console.log(fierstBox);
        var nva = document.querySelector('#nva');
        console.log(nva);
        var li = document.querySelector('li');
        console.log(li)
        // 3.querySlectorAll 返回所有的元素对象
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis)
    </script>
</body

4.获取body元素和html元素

获取这两类元素可以直接使用document直接就能获取

<body>
    <script>
        // 1.获取body元素
        var  bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body

5.DOM事件三要素

事件源事件类型事件处理程序
1.事件三要素事件源（谁）事件类型（什么事件）事件处理程序（做啥）
2.事件源事件被触发的对象
3.事件类型如何触发比如鼠标点击（onclick）还是鼠标经过
4.事件处理程序通过函数赋值的方式完成

<body>
    
     <button id="btn">孙悟空</button>
     <script>
     // 1.事件源
         var btn = document.getElementById('btn');
        // 2.事件类型
         btn.onclick = function() {
         // 3.事件类型
             alert("闹天宫");
         }
     </script>
</body>

6.操作元素修改元素属性

该代码是两个按钮当你点击一个按钮时会切换到当前按钮对应的图片
只需要把里面的图片更换一下就能直接使用

<body>
    <button id = 'z'>战绩图</button>
    <button id = 'd'>大奶图</button> <br>
    <img src="../../img/1.jpg" alt="" title="战绩图">
    <script>
        // 修改元素属性
        // 1.获取元素
        var z = document.getElementById('z');
        var d = document.getElementById('d');
        var img = document.querySelector('img');
        // 2.注册事件  处理程序
        d.onclick = function() {
            img.src = '../../img/2.jpg';
            img.title= '大奶图';
        }
        z.onclick = function() {
            img.src = '../../img/1.jpg';
            img.title = '战绩图';
        }
    </script>
</body>

7.小练习

要求：
// ① 根据系统不同时间来判断，所以需要用到日期内置对象
// ② 利用多分支语句来设置不同的图片
// ③ 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
// ④ 需要一个div元素，显示不同问候语，修改元素内容即可

<body>
    <div>
        <img src="../../img/1.jpg" alt="">
    </div>
    <script>
        var times = new Date();
        var hour = times.getHours();
        var im = document.querySelector('img');
        im.onclick = function () { 
            if(hour < 6){
                this.src = '../../img/2.jpg';
            }else if (hour < 11){
               this.src = '../../img/3.jpg';
            }else if (hour < 14){
                im.src = '../../img/4.jpg';
            }else if (hour < 18){
                im.src = '../../img/5.jpg';
            }else{
                im.src = '../../img/6.jpg';
            }
        }
    </script>

8.表单属性的设置

DOM事件不仅修改元素属性还能对表单做一些操作
下面代码是当你点击按钮是 input输入框会显示信息

<body>
    <button>按钮</button>
    <input type="text " value="请输入内容">
    <script>
        // 1.获取元素
        var but = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件 处理程序
        but.onclick = function() {
            // input.innerHTML = '被点击了';
            // 普通盒子比如div是通过innerHTml更改里面的内容
            // 表单是通过value来修改的
            /* 利用 DOM 可以操作如下表单元素的属性：
            type、value、checked、selected、disabled（禁用
            
            */
            input.value = '啊 被点鸡了';
            // disabled 是true 表示按钮被禁用  为false表示启用
            this.disabled = true;
        }
    </script>
</body>

9.小作业之密码显示

要求密码显示框点击右边小眼睛显示密码框的内容
再次点击隐藏密码框内容

实现思路
首先获取密码框的内容和小眼睛的内容方便下一步操作
绑定点击时间当点击时把input密码框类型改为文本框就能显示密码啦
隐藏密码同理只需要把input改为密码框类型就行
样式设置代码

<style>
        div{
            
            width: 300px;
            margin: 100px auto;
            border-bottom: 1px solid #ccc;
        }
        img{
            position: relative;
            top: 10px;
            width: 20px;
            height: 20px;
        }
        input{
            width: 270px;
            height: 30px;
            border: 0;
            outline: none;
        }
    </style>```

js代码
```javascript
<body>
    <div>
        <input type="password" >
        <img src="../../img/9.jpg" alt="">
    </div>
    <script>
        var pwd = document.querySelector('input');
        var eye = document.querySelector('img');
        var flag = 0;
        eye.onclick = function(){
            if(flag == 0){
                pwd.type = 'text';
                flag = 1;
                eye.src = '../../img/10.jpg';
            }else{
                pwd.type = 'password';
                flag = 0;
                eye.src = '../../img/9.jpg';
            }
        }
    </script>

10.小作业之精灵图

/* ① 首先精灵图图片排列有规律的
② 核心思路：利用for循环修改精灵图片的背景位置 background-position
③ 剩下的就是考验你的数学功底了
④ 让循环里面的 i 索引号 * 22 就是每个图片的y */

css代码

<style>
        div{
            width: 300px;
            margin: 100px auto;
        }
        li{
            list-style-type: none;
            width: 24px;
            height: 24px;
            float: left;
            background-color: aquamarine;
            margin: 15px;
            background: url(../../img/精灵图.png) no-repeat;
        }
    </style>

js代码

<body>
    <div>
        
        <ul>
            <li></li>
            <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>
    </div>
    <script>
        var li = document.querySelectorAll('li');
        for(var  i = 0 ; i < li.length ; i++){
            var num = i * 25;
            li[i].style.backgroundPosition = '0 -' + num + 'px' ;
        }
    </script>
</body>

实现后展示
在这里插入图片描述

11.显示隐藏文本框内容

某些网站的搜索框里面会显示一些默认的文字
当你点击是这些默认的文字会消失
下面我们来实现一下
首先获取文本框，然后绑定移入事件
当移入时把文本框的value值变成空的
点鼠标移出文本框会显示默认值

<body>
    <input type="text " value="手机">
    <script>
        // 1.获取元素   
        var input = document.querySelector('input');
        // 2.注册事件处理程序
        input.onfocus = function() {
            this.value = '';
            this.style.color = '#333';
        }
        input.onblur = function () {
            this.value = '手机';
            this.style.color = '#999';
        }
    </script>
</body>