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

最新推荐文章于 2023-12-09 14:25:27 发布
最新推荐文章于 2023-12-09 14:25:27 发布
阅读量4.2k 收藏
点赞数
文章标签： div 中的i标签如何点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_35106801/article/details/112111283
版权

1cae210c01023564e9cda6e8616d4e33.png

文中必有不正确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>

ba0a086416adb190fd70f074d9cbcc01.png

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>

3ae1b8467eec498e6afaaa69397a8b6d.png

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元素标签内添加事件，执行脚本。不推荐使用，只是让你有个感觉，不至于会被轻易劝退。

语法：

<tag 事件= '执行脚本'></tag>

功能：

在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>
栗春希夏
关注
前端搭建小人逃脱游戏（内附源码）
官方推荐
04-17 2万+
通过简单的js代码来制作有趣的小游戏，让前端小白或者初学者有趣的掌握内容
前端搭建猜数字游戏（内附源码）
官方推荐
04-10 3万+
基于前端基础内容实现的简易版猜数字demo，帮助前端初学者或者小白来体验前端三件套的搭配开发；
查看excel编码_E009 如何把Word版试题ABCD选项题目分离写入Excel题库
weixin_39540271的博客
11-29 547
Hi，How are you doing?我是职场编码（CodeVoc）。在E000中，我们介绍了Node.js、Ruby、Electron等工具下载安装。这期，给你演示一下由Electron联合Ruby制作的小工具。知乎视频​www.zhihu.com借助Electron官方Demo，我们很容易制作一个工具展示平台。点击“View Demo”会弹出我们的工具界面。一、项目需求这个工具的主要目的是...
div 中的i标签如何点击事件_如何绘制一个圆形可点击区域
weixin_30113867的博客
12-25 1917
如何绘制一个圆形可点击区域简单来讲，画一个圆，能够点击。本文将讲述三种方法，分别从HTML标签绘制、CSS样式绘制以及JavaScript事件监听绘制圆形可点击区域。使用map和area标签利用img标签可匹配的map和area使用这种方法必须将img标签的usemap属性与map标签的name属性与id属性相关联。然后在area标签中，设置所绘制的shape形状与圆形的圆心和半径。<img...
div 中的i标签如何点击事件_前端优化：语义标签进化史
weixin_34632164的博客
12-25 1781
内容提要语义标签的应用，在SEO优化中是最为基础的内容，语义标签的发展与进化，是随着HTML和CSS版本的升级而不断进化来的，随着HTML5的普及，SEO语义化的发展也向前大大的迈进了一步。这主要体现在语义标签和微数据的应用上。一个使用语义标签+微数据编写前端代码的网站，在搜索排名与搜索样式展现的丰富性上具有无与伦比的优势。HTML 4.0：表格布局时代记得刚上大学的时候，学习网页设计这...
JS 给标签添加事件
weixin_42136237的博客
06-27 503
JS 给标签添加事件
点击事件及按钮事件。
weixin_45617334的博客
09-14 3898
事件源 事件名 事件注册 事件处理 点击事件 (1)单击事件 在这个案例中，事件源是id为“p1”的元素，事件名是单击事件注册οnclick=“fun()”, 也就是说，当单击id为“p1”的元素时，交给fun函数来处理。 (2)双击事件 (3)鼠标按下/抬起。(on mouse down / on mouse up) (4)鼠标移入移出（on mouse enter / on mouse leave） (5)事件综合 <!DOCTYPE html> <html> <
Dialogs and Notification Logs using Jquery.zip
11-08
在JavaScript的世界里，jQuery库是不可或缺的一部分，它极大地简化了DOM操作、事件处理以及动画效果。本项目"Dialogs and Notification Logs using Jquery.zip"显然关注的是如何利用jQuery来创建对话框（Dialogs）和...
JavaScript实现鼠标点击爱心效果
星宇痕的博客
02-23 1843
挺好玩的
JavaScript制作贪吃蛇小游戏
m0_60264901的博客
01-04 7520
揭秘贪吃蛇小游戏代码
模拟元素点击的几种方式
weixin_34289744的博客
08-02 310
最简单的莫过于使用click方法 &lt;input id="btn" type="button" value="BUTTON" onclick="alert(1)"/&gt; &lt;script&gt; var btn = document.getElementById('btn'); btn.click(); &lt;/script&gt; 所
js事件触发
最新发布
zhengying5dvhdg的博客
12-09 4454
js事件，冒泡事件，Event对象，事件委托，移动端事件
关于li标签循环绑定点击事件后输出i的问题
YW博客
09-17 589
代码： <body> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <script> var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) {
使用layui，动态生成的标签加onclick点击事件,终于找到一个能用的方法了,可以获取当前元素
热门推荐
capricornce的博客
11-20 3万+
使用layui的时候，动态生成一段数据： "&lt;i class='fa fa-clock-o fa-1g' style='color: darkgrey; padding-left: 80px'&gt; "+val.insertTime+"&lt;/i&gt; 想给这个 &lt;i&gt;&lt;/i&gt;标签加点击事件： 因为用的layui框架，整体上也用了它的一些规则： ...
qtreewidget 获取根节点_javascript：什么是Dom节点？
weixin_39633493的博客
12-05 483
大家好，我是专注前端开发，Web前端，可爱又迷人的前端小姐姐，本期为大家带来的前端入门新知识是”javascript：什么是Dom节点？“，有兴趣做前端开发的朋友，和我一起来看看吧！本节主要内容：什么是DOM?Document对象Dom节点分类Document节点属性获取页面元素节点创建页面元素操作页面元素属性学习目标：一、什么是DOM? DOM Document Object Mod...
样式相关操作
xyw_jzj5201314的博客
11-12 227
样式相关操作 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <button>点击&l
2021-03-01
LHJ0_0的博客
03-01 321
下拉列表且右拉框 首先我们先看看初始样式： 接着我们看一下最终的效果： 现在我们看HTML的布局： 首先一个大的a标签包裹着一句文本，后面接着p标签，p标签里面接着i标签，同时p标签包裹着一句文本； 这里放a标签是因为这是一个“按钮”，按钮肯定会有点击，所以我们就要用到a标签，然它在点击时有一个页面跳转；p标签在这里的意义就是一个包裹文本的标签； 现在，我们来看a标签的样式： 先是将这个元素变成行内块级元素，然后给一个相对定位，内边距：上下为0px 左右为20px，高100px，行高100px，字体颜
绑定点击事件及解绑点击事件
YY的博客
10-20 3312
绑定点击事件及解绑点击事件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值