div 中的i标签如何点击事件_JavaScript最好玩的地方DOM操作持续更新/改进中...

最新推荐文章于 2022-10-20 17:41:22 发布

栗春希夏

最新推荐文章于 2022-10-20 17:41:22 发布

阅读量4.1k

点赞数

文章标签： div 中的i标签如何点击事件

本文链接：https://blog.csdn.net/weixin_35106801/article/details/112111283

版权

文中必有不正确or不恰当的地方，目前的水平仅如此，可以喷这篇文章，但请别喷作者谢谢。文中如有错误的地方，愿意的话请告知作者感激不尽！

JS DOM 操作

目录：

1页查找DOM元素

1、document.getElementById("") 2、document.getElementsByTagName("") 3、document.getElementClassName("") 4、document.querySelector("" )

2页 DOM事件

2.1 HTML事件 2.2 DOM0级事件

1页查找DOM元素

如何找到DOM 元素呢？

目前所知命令：

1、document.getElementById("")

这个哥们呢！就比较轻松容易，但是呢缺陷也很大。就是他只能识别id属性，id缺陷很大的！而且只能识别一个！一个！一个！他直接返回的就是DOM对象！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">变大变粗变红色！</div>
    <script>
        // 创建一个类名来接收这个DOM对象。所以2个类名是不一样的！
        var box = document.getElementById("box")
            // 类名.style.效果  如果说是font-size!他没有 - 所以只能写成fontSize第二个字母大写
            // .style 只能改变DOM对象！这句话非常的关键。
            // 他是DOM对象的样式设置
            // 变颜色 
        box.style.color = '#f00';
        // 变字体大小
        box.style.fontSize = '25px';
        // 变字体粗细
        box.style.fontWeight = '900';
    </script>
</body>

</html>

2、document.getElementsByTagName("")

英文拆解：document 当前文档，当前网页。 get 获取 Elements 元素的复数 by 额不知道哈哈！ tag标签 name 名字！

这个哥们呢！有点复杂但是比较舒服！就是通过标签名来获取。只不过啊，

他的缺陷是：不是直接返回DOM对象，而是数组对象！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="one">
        <span>变红</span>
        <span>变大</span>
        <span>变粗</span>
    </div>
    <script>
       // 这一步啊，是获取div这个元素，这个元素里面的Span标签，TagName 是获取标签，TagName呢获取的元素呢，又是一个数组对象！
        // 所以呢不能直接修改样式！因为修改样式，一定得是一个DOM对象
        // 那如何修改呢?使用遍历数组的方式来修改。
        var box = document.getElementById('one').getElementsByTagName('span');
        // 通过循环遍历数组，首先var i = 0 这句话是从下标0开始 var 新的类名 = TagName的类名.length; i < TagName的类名.length ; i++
        // TagName.length,就是数组的个数，所以就明白为什么要 i < TagName的类名
        for (var i = 0, len = box.length; i < len; i++) {
            console.log(box[i]);
            // 使用if else 判断 或者 switch 判断都行！;
            switch (i) {
                case 0:
                    box[i].style.color = '#f00';
                    break;
                case 1:
                    box[i].style.fontSize = '30px';
                    break;
                case 2:
                    box[i].style.fontWeight = '900';
                    break;
                default:
                    box[i].style.color = '#000'
                    break;
            }
        }
    </script>

</body>

</html>

3、document.getElementClassName("")

通过类名获取，用法和BYID一样。只不过就是统统都选，就是相同类都选就很头痛。

4、究极用法：document.querySelector query查询 Selector选择器

这个是通过真正的类来选择的！哈哈！但是嘞有坑，要注意！对要特别注意哦！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="one">皇上要雨露匀沾</div>
    <div class="one">？</div>
    <script>
        // 这个方法（）中是可以写 :nth-of-type()  :nth-child() :nth-last-child()
        var num = document.querySelector('.one:nth-of-type(1)');
        // 这样我们就获取了雨露均沾！
        console.log(num);
        // 而且还是直接的DOM对象！哎呀咋怎么快乐呢？
        // 变大
        num.style.fontSize = '30px';
        // 变红
        num.style.color = 'red';
    </script>
</body>

</html>

避免的坑2

特别注意这里有些坑如果这些标签是兄弟关系的情况下，是从上往下数，不管他的类是不是相同的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>@</div>
    <div>！</div>
    <div class="one">皇上要雨露匀沾</div>
    <div class="one">？</div>
    <script>
        // 这个方法（）中是可以写 :nth-of-type()  :nth-child() :nth-last-child()
        // 现在看，雨露均沾前面有2个同级标签，所以他是第3个 不管前面2个是不是相同的类。
        var num = document.querySelector('.one:nth-of-type(3)');
        // 这样我们就获取了雨露均沾！
        console.log(num);
        // 而且还是直接的DOM对象！哎呀咋怎么快乐呢？
        // 变大
        num.style.fontSize = '30px';
        // 变红
        num.style.color = 'red';
    </script>
</body>

</html>

避免的坑3

特别注意这里有些坑如果这个标签是父子关系，那么直接写第一个就好了不用写>.one:nth-of-type()

不管有几层！只要不是兄弟关系就行,但是为了正确还是不要偷懒的好。

老老实实的写上去远离996,远离996从现在做起、从每一行代码做起。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>@</div>
    <div class="two">
        <div class="there">
            <div class="four">
                <div class="one">皇上要雨露匀沾</div>
            </div>
        </div>
    </div>
    <div class="one">？</div>
    <script>
        // 这个方法（）中是可以写 :nth-of-type()  :nth-child() :nth-last-child()
        var num = document.querySelector('.one:nth-of-type(1)');
        // 这样我们就获取了雨露均沾！
        console.log(num);
        // 而且还是直接的DOM对象！哎呀咋怎么快乐呢？
        // 变大
        num.style.fontSize = '30px';
        // 变红
        num.style.color = 'red';
    </script>
</body>

</html>

2页 DOM事件以及各种事件命令

鼠标事件命令：

- onload :页面加载时触发
- onclick :鼠标点击时触发
- onmouseover :鼠标滑过时触发
- onmouseout :鼠标离开时触发
- onfoucs :获得焦点时触发
- onblur :失去焦点时触发
- onchange :域的内容改变时发生

2.1 HTML事件什么是HTML事件？直接在HTML元素标签内添加事件，执行脚本。不推荐使用，只是让你有个感觉，不至于会被轻易劝退。

语法：

功能：

在HTML元素上绑定事件。

例子：鼠标点击时触发！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="弹出" onclick="alert('我是按钮')">
</body>

</html>

鼠标点击事件

知乎视频www.zhihu.com

2.2 DOM0级事件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .open {
            width: 200px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background: #00f;
            color: #fff;
            font-size: 14px;
            border-radius: 5px;
            margin-top: 30px;
        }
        
        .close {
            width: 200px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            background: #666;
            color: #ccc;
            font-size: 14px;
            border-radius: 5px;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <!-- 引号里面的都是自己命名的类名 
    使用this指向 后面创建一个变量接收属性。-->
    <div class="open" id="btn">解锁</div>
    <div class="close" hidden="hidden"></div>

    <script>
        // 获取按钮
        var btn = document.getElementById("btn")
            // 给按钮绑定事件
            // onclick 鼠标点击时触发事件
        btn.onclick = function() {
            // 通过类名来判断
            // 这里的this 指向的是我们获取的DOM对象，btn。所以这个this指的就是btn 这个DOM对象
            // 如何理解这个判断呢？是这样的，
            // 假如我们点击的这个事件，他的类名等于open，那么点击他就会变成close这个类，并且
            // 上面的内容会被替换成锁定。
            // 假如我们点击的这个事件，他的类名不等于open,那么电吉他就会变成open这个类，并且
            // 上面的内容会被替换成解锁
            if (this.className == "open") {
                // className获取这个类DOM对象
                this.className = "close";
                this.innerHTML = "锁定";
            } else {
                this.className = "open";
                // innerHTML是获取对象文本
                this.innerHTML = "解锁";
            }
            // 通过内容来判断
            if (this.innerHTML == "解锁") {
                this.className = "close";
                this.innerHTML = "锁定";
            } else {
                this.className = "open";
                // innerHTML是获取对象文本
                this.innerHTML = "解锁";
            }
        }
    </script>

</body>

</html>

栗春希夏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 中的i标签如何点击事件_JavaScript最好玩的地方DOM操作持续更新/改进中...

文中必有不正确or不恰当的地方，目前的水平仅如此，可以喷这篇文章，但请别喷作者谢谢。文中如有错误的地方，愿意的话请告知作者感激不尽！JS DOM 操作目录：1页查找DOM元素1、document.getElementById("")2、document.getElementsByTagName("")3、document.getElementClassName("")4、document.q...
复制链接

扫一扫