JavaScript DOM 2

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量34 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_78447973/article/details/134222138
版权

一.单击事件案例

var btn = document.getElementsByTagName("button")[0];
            
            
            btn.onclick = function(){
                //获取button的文本值.
                var text  = btn.innerText ; 
                if(text=="开始点名"){
                    btn.innerText = "停止点名"
                }else{
                    btn.innerText = "开始点名";
                }
            }

二.双击事件案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 230px;
                height: 230px;
                text-align: center;
                border : 1px  solid  black;
                display: none;
            }
        </style>
        
    </head>
    <body>
        <button>双击打开登录页面</button>
        
        <div>
            <h3>登录弹窗！！</h3>
            账号<input type="text" placeholder="请输入你的账号" /> <br>
            密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>
            <button>登录</button>  <button>返回</button>
        </div>
                        
        <script>
                
            
            //双击打开登录页面
            document.getElementsByTagName("button")[0].ondblclick = function(){
                
                document.getElementsByTagName("div")[0].style.display = "block";
                
            }
            
            document.getElementsByTagName("button")[2].onclick = function(){
                document.getElementsByTagName("div")[0].style.display = "none";
            }
        </script>
        
    </body>
</html>

三.鼠标移入移出事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .a{
                width: 200px;
                height: 200px;
            }
            .b{
                width: 400px;
                height: 400px;
            }
            
            
        </style>
    </head>
    <body>
        
        <img class="a" src="img/1.PNG"> 
        
        <script>
            //鼠标移入图片内部 ,图片放大  鼠标移出图片  图片还原 
            var img = document.getElementsByTagName("img")[0];
            
            img.onmouseover = function(){
                    // img.style.width = "400px";
                    // img.style.height = "400px";
                    img.className = "b";
            }
            
            img.onmouseout = function(){
                    // img.style.width = "200px";
                    // img.style.height = "200px";
                    img.className = "a";
            }
            
        </script>
        
    </body>
</html>

四.键盘输入事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        小写字母：<input type="text" id="a" /> <br>
        大写字母：<input type="text" id="b" />
        
        <script>
            //在第一个文本框输入小写字母.下面的文本框默认输出上面的与之对应的大写字母
            
            //思路:给第一个文本框加上键盘输入事件（每敲击一下键盘就触发一下事件）.
            //获取第一个文本框的值.然后赋予给第二个文本框
            
            var i1 = document.getElementById("a");
            var i2 = document.getElementById("b");
            i1.onkeyup = function(){
                i2.value = i1.value.toUpperCase();
            }
            
        </script>
        
    </body>
</html>

五.获取焦点和失去焦点事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        账号：<input type="text" id="a" />          <span id="c"></span>          <br>
        
        <script>
            var username = document.getElementById("a");
            var password = document.getElementById("a");
            var tip1 = document.getElementById("c");
            var tip2 = document.getElementById("d");
            
            //需求:输入账号之后.提示账号输入规则.
            //思路给文本框加上获取焦点事件  给第一个span标签生产一个提示用于
            username.onfocus = function(){
                tip1.innerText = "账号的长度要在6-10之间";
                tip1.style.color = "red";
            }
            
            //需求2:输入完成之后,要判断账号是否符合格式.
            //思路:失去焦点之后判断.
            username.onblur = function(){
                var username123 = username.value; 
                if (username123.length >=6  && username123.length<=10) {
                    tip1.innerText = "√";
                    tip1.style.color = "green";
                } else{
                    tip1.innerText = "X";
                    tip1.style.color = "red";
                }
            }
            
            
        </script>
        
    </body>
</html>

六.表单提交事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form id="f" action="#" method="post">
            账号：<input type="text" id="a" />              <span id="c"></span>          <br>
            密码：<input type="password" id="b" />          <span id="d"></span>          <br>
            <input type="submit" value="登录" />
        </form>
        <script>
            var username = document.getElementById("a");
            var password = document.getElementById("b");
            var tip1 = document.getElementById("c");
            var tip2 = document.getElementById("d");
            var f = document.getElementById("f");
            
            
            //需求:输入账号之后.提示账号输入规则.
            //思路给文本框加上获取焦点事件  给第一个span标签生产一个提示用于
            username.onfocus = function(){
                tip1.innerText = "账号的长度要在6-10之间";
                tip1.style.color = "red";
            }
            
            //需求2:输入完成之后,要判断账号是否符合格式.
            //思路:失去焦点之后判断.
            username.onblur = function(){
                var username123 = username.value; 
                if (username123.length >=6  && username123.length<=10) {
                    tip1.innerText = "√";
                    tip1.style.color = "green";
                } else{
                    tip1.innerText = "X";
                    tip1.style.color = "red";
                }
            }
            
            password.onfocus = function(){
                tip2.innerText = "密码的长度要在6-10之间";
                tip2.style.color = "red";
            }
            
            //需求2:输入完成之后,要判断账号是否符合格式.
            //思路:失去焦点之后判断.
            password.onblur = function(){
                var password123 = password.value; 
                if (password123.length >=6  && password123.length<=10) {
                    tip2.innerText = "√";
                    tip2.style.color = "green";
                } else{
                    tip2.innerText = "X";
                    tip2.style.color = "red";
                }
            }
            
            
            
            //onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交  return false就表示不提交
            f.onsubmit = function(){
                
                if(tip1.innerText=="√"  && tip2.innerText=="√" ){
                    return true;
                }else{
                    alert("请按照要求写");
                    return false;
                }
            }
            
            
        </script>
        
    </body>
</html>

七.下拉菜单事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <select id="a">
            <option>中国银行</option>
            <option>建设银行</option>
            <option>交通银行</option>
        </select>
        
        <select id="b">
            <option>中国银行卡号111</option>
            <option>建设银行卡号222</option>
            <option>交通银行卡号333</option>
        </select>
        
        <script>
            // onchange事件: 一般只会作用于下拉框  点击下拉框且改变值.
            //适用场景: 银行卡的互动.  地址栏的联动
            
            var a = document.getElementById("a");
            var b = document.getElementById("b");
            
            
            //需求实现两个下拉框的联动效果.
            //思路:给第一个下拉框加上一个onchange事件
            //思路:获取第一个下拉框的第几个元素(下标)
            //思路:将上一步的思路的下标 赋予给第二个下拉框即可
            a.οnchange= function(){
                // 如何获取下拉框的下标
                // console.log(a.selectedIndex);
                b.selectedIndex = a.selectedIndex;
            }
            
            b.οnchange= function(){
                // 如何获取下拉框的下标
                // console.log(a.selectedIndex);
                a.selectedIndex = b.selectedIndex;
            }
        </script>
        
        
    </body>
</html>

八.修改元素的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img src="img/1.PNG" />
        <button>替换图片</button>
        
        <script>
            //html元素是有很多属性的.
            //例如 id  class  name  src   href   
            
            document.getElementsByTagName("button")[0].onclick = function(){
                //将xxx元素的aaa属性改成bbb
                //xxx.setAttribute("aaa","bbb");
                
                //var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值
                
                // document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
                
                
                if(document.getElementsByTagName("img")[0].getAttribute("src")  == "img/1.PNG" ){
                    document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
                }else{
                    document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");
                }
                
                
            }
            
            
        </script>
    </body>
</html>

九.简化版的轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img{
                width: 100px;
                height: 100px;
            }
        </style>
        
    </head>
    <body>
        <img src="img/1.PNG" />
        
        
        
        <script>
            //只要有需求:  每隔一段事件就要作什么事 就需要联想到使用定时器
            
            var img = document.getElementsByTagName("img")[0];
            //实现图片的替换 但是图片的文件名可能不是有规律.
            //所以可以将图片的所有文件名路径名 存到数组中. 数组是有规律的.
            var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];
            
            var index = 1;
            setInterval(function(){
                
                img.setAttribute("src",src_1[index]);
                index++;
                if(index==4){
                    index = 0;
                }
            },1000);
            
        </script>
        
    </body>
</html>

vn425
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中 DOM 的概念解释
norang的博客
06-04 1876
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
javascript dom2 源码及pdf
02-09
总的来说，JavaScript DOM2是Web开发中的关键工具，它让JavaScript成为了一种强大的客户端脚本语言，为网页带来了丰富的动态性和交互性。通过学习和实践，开发者可以提高网页的用户体验，创建出更加智能和灵活的Web...
JavaScript之DOM
qq_43751200的博客
06-05 1773
DOM
JavaScript DOM操作
好好学习天天向上
03-27 5163
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript DOM详解
Chiclaim
10-03 7438
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript DOM基础
程序员柒的博客
07-18 2159
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
JavaScript——DOM
super码力的博客
12-15 3051
文档对象模型（简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式...
JavaScript删除DOM
weixin_56550293的博客
12-16 4944
删除一个DOM节点就比插入要容易很多 要删除一个节点秒首先要获取该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉 //获取自身节点 var self=document.getElementById('id'); //获取自身节点的父节点 var parent=self.parentElement; //删除节点 parent.removeChild(self); 注意：删除后的节点虽然已经不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置 当你遍..
《JavaScript DOM 编程艺术》
weixin_36986228的博客
02-01 874
JavaScript中的DOM对象
qq_44971635的博客
03-23 2477
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript DOM编程艺术(第2版pdf)+源代码
02-26
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
JavaScript DOM编程艺术【第2版&高清】.pdf
10-26
但是，根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术，高清资源，无比经典，值得拥有”，我们可以推断这本书主要讲述了JavaScript中DOM（文档对象模型）的相关编程技术。...
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2507
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 370
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1377
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 490
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值