《JavaScript第六章》

已于 2023-11-09 15:11:37 修改
阅读量39 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
于 2023-10-29 17:13:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ReviewI/article/details/134104812
版权
本文详细介绍了JavaScript中DOM的操作方法，包括通过标签名、类名、ID获取元素，以及如何修改节点的文本、HTML值、样式和添加事件。此外，还涵盖了单击、双击、鼠标移入移出等事件的案例和元素属性的使用。
摘要由CSDN通过智能技术生成

一、Dom简介

什么是API？

应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。

例如console.log方法。就是JS的一个API。

文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。

翻译：对HTML内部的标签进行处理。

二、如何通过DOM获取元素节点 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <h3 id="c" name="b">我是h3标签</h3>

        <h3 class="a">我是h3标签</h3>

        <h3 class="a">我是h3标签</h3>

       

        <p name="b" class="a">我是p标签</p>

       

        <script>

            //通过DOM节点获取HTML元素的4种方法  每种方法都要掌握.非常相似.

           

            //方法1:通过标签名获取元素

            var a = document.getElementsByTagName("h3");

            //此时就已经获取到了页面上所有的h3标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

            //至于怎么去处理,就是后续的任务.

           

            //方法2:通过class名获取元素

            var b = document.getElementsByClassName("a");

            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

           

            //方法3:通过name获取元素

            var c = document.getElementsByName("b");

            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

           

            //方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理

            var d = document.getElementById("c");

           

        </script>

    </body>

</html>

三、如何操作节点 

常见的操作节点的三个属性：

1.innerText表示给标签内部重新赋值或取值  这里是文本值

2.innerHtml表示给标签内部重新赋值或取值  这里是html值               

注意以上2个方法只能作用于 非表单元素  例如 h标签  a标签   p标签等等

第三个方法只能作用于表单元素

例如input  

3.value表示给标签内部重新赋值或取值  这里是html值

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <h3 id="c" name="b">我是h3标签</h3>

       

        <h3 class="a">我是h3标签1<a href="#">你好</a>  </h3>

       

        <input type="text" id="abc" value="739737680" />

       

        <script>

         

            // var a = document.getElementsByTagName("h3");

            // for(var i = 0 ;i<a.length;i++){

            //  console.log(a[i].innerText);//表示获取各个h3标签内部的文本值

            //  a[i].innerHTML = "<a href='#'>你好</a>";

            // }

           

     

            // var b = document.getElementsByClassName("a");

            // for(var i = 0 ;i<b.length;i++){

            //  console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值

            // }

           

            var d = document.getElementById("abc");

            // d.value = "账号123";

            console.log(d.value);

           

        </script>

    </body>

</html>

四、如何操作节点的样式 

步骤1.思考需要修改什么样式

步骤2.去css里面查看该样式的单词

步骤3.按照提示来

步骤4.通过    节点.style.xxx  表示取值或赋值

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

           

            .abcd{

                color: red;

                background-color: blue;

                font-size: 40px;

            }

           

        </style>

       

    </head>

    <body>

        <p id="abc"  >你好，我是p标签</p>

       

        <script>

            var p = document.getElementById("abc");

         

            //例如我要修改字体颜色

            // p.style.color = "red";

            // console.log(p.style.color)

           

            //例如我要修改背景色

            // p.style.backgroundColor = "green"

           

            //以上写法的缺点: 麻烦  每次只能修改一个样式

           

            //所以:  如果样式很多,我们可以先将其封装到一个css里面

            p.className = "abcd";//表示给该元素 赋予一个class为abcd的属性

           

        </script>

    </body>

</html>

五、js中的事件管理 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            img{

                width: 200px;

                height: 200px;

            }

        </style>

       

    </head>

    <body>

        <p id="a">你好</p>

        <p>你好</p>

        <p>你好</p>

        <p>你好</p>

       

        <hr>

        <img   src="img/1.PNG" />

        <hr>

        账号：<input type="text" id="aaa" />  <span id="bbb"></span> <!--提示用语 -->

       

        <script>

            //js中的事件: 用户对前台页面做出的一些操作 来触发一些函数

            //例如用户的单击  双击   等等等等

           

            //需求:用户点击id为a的元素  弹出一个窗口

            //步骤1:获取元素  

            // 步骤2:  元素.事件名 = function(){代码体}

            //步骤3 常见的事件名:

            //单击事件 onclick

           

           

            // document.getElementById("a").onclick = function(){

            //  alert(123);

            // }

           

           

            // //需求2:给所有的p标签加上点击事件  下面的写法是错误的 需要遍历

            // // document.getElementsByTagName("p");.onclick = function(){

            // //   alert(123);

            // // }

            // var p = document.getElementsByTagName("p");

            // for(var i = 0 ;i<p.length;i++){

               

            //  p[i].onclick = function(){

            //      alert(456);

            //  }

               

            // }

           

           

            //双击事件  

            // document.getElementById("a").ondblclick  = function(){

            //  alert(123);

            // }

           

           

            //鼠标移入事件 悬浮事件

            //需求:鼠标放上图片   图片就放大2倍  鼠标移出就恢复原状

           

            //鼠标移入事件onmouseover

            // document.getElementsByTagName("img")[0].onmouseover = function(){

            //  document.getElementsByTagName("img")[0].style.width = "400px";

            //  document.getElementsByTagName("img")[0].style.height = "400px";

            // }

           

            // //鼠标移出事件onmouseout

            // document.getElementsByTagName("img")[0].onmouseout = function(){

            //  document.getElementsByTagName("img")[0].style.width = "200px";

            //  document.getElementsByTagName("img")[0].style.height = "200px";

            // }

           

           

            //输入账号,失去焦点就需要数据校验

           

            document.getElementById("aaa").onblur = function(){

                var str = document.getElementById("aaa").value;

                 if(str.length >10){

                     document.getElementById("bbb").innerText = "长度太长了";

                     document.getElementById("bbb").style.color = "red";

                 }else{

                     document.getElementById("bbb").innerText = "数据合格";

                     document.getElementById("bbb").style.color = "green";

                 }

            }

                

        </script>

    </body>

</html>

六、js的属性 

元素的常见属性:  id   class   src  href

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

       

        <a id="a" href="1_dom简介.html">进入1页面</a>

       

        <button id="abc">按钮</button>

       

        <img id="b" src="img/1.PNG" />

       

        <h3></h3>

        <button id="btn">开始点名</button>

       

     

        <script>

            //js获取元素的属性：

            //元素的常见属性:  id   class   src  href

           

            //需求:点击按钮 让这个a标签的href改成跳转到第二个页面

            //需求 点击按钮,进入下一张图片

            document.getElementById("abc").onclick = function(){

                document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");

                document.getElementById('b').setAttribute("src","img/2.PNG");

            }

           

           

            //点击开始点名按钮 来回切换

            document.getElementById("btn").onclick = function(){

                if(document.getElementById("btn").innerText=="开始点名"){

                    document.getElementById("btn").innerText = "停止点名"

                }else{

                    document.getElementById("btn").innerText = "开始点名"

                }

            }  

             

        </script>

    </body>

</html>

七、 单击事件的案例

需求如下:点击按钮  来回展示开始点名或停止点名

思路:获取到button标签,然后给它赋予一个点击事件.

接着判断button标签内部的value值.根据值来进行判断.进而修改

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <button>开始点名</button>

       

        <script>

            var btn = document.getElementsByTagName("button")[0];

           

            btn.onclick = function(){

                //获取button的文本值.

                var text  = btn.innerText ;

                if(text=="开始点名"){

                    btn.innerText = "停止点名"

                }else{

                    btn.innerText = "开始点名";

                }

            }

   

        </script>

    </body>

</html>

八、 双击事件的案例

需求:双击打开登录页面

<!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>

           

            //思考:浏览器中的弹窗为啥那么好看

            //但是我们学习的三个弹窗 一个比一个丑

            //其实浏览器的弹窗 并不是真正的弹窗.

            //思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.

              

            //需求:双击打开登录页面

            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>

软件2201 方琏琏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript（六）
weixin_73646899的博客
09-24 150
文档对象DOM 一、DOM对象简介 什么是DOM对象 DOM(Document Object Model 文档对象模型)可以完成HTML和XML文档的操作，在JavaScript中利用DOM操作HTML和CSS样式是最常用的样式之一。DOM对JavaScript是一种可操作HTML文档得重要手段。利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。 DOM HTML 节点树 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 1、整个文档是
JavaScript第二章笔记
chongyang9_9的博客
05-12 192
if选择结构 // 三种程序结构: // 顺序结构:让代码按照从上到下的顺序一行一行执行 // 选择结构:根据条件来决定某些代码是否执行 // 循环结构:根据条件来决定某些代码是否重复执行 // 选择结构:根据条件判断,配合if语法来决定某些代码是否要执行 // if选择结构:4种 // 1.普通if条件语句: // if(条件){ // 当条件为真时,执行{}中的代码 // } // 假如说创建一个变量代表你的考试成绩 // var score = 59;
JavaScript编程精解(第三版)-第六章习题分析
m0_46126931的博客
02-28 283
JavaScript编程精解(第三版)-第六章习题分析 类,对象,原型,迭代器
JavaScript 第六章（揭秘Unicode）
帮助别人就是帮助自己
01-23 1393
当我们在JavaScript中编写代码时，Unicode让我们能够使用全球各种语言的字符，包括中文。Unicode就像一个万国字符大典，每一个字符都有自己的编码，就像每个人都有自己的身份证号一样。这使得我们可以在字符串、注释甚至变量名中使用中文字符。尽管如此，我们通常还是建议在标识符（比如变量名和函数名）中使用ASCII字符，也就是那些最常见的英文字母和数字。但这并不意味着我们不能在代码中使用中文，但是通常还是建议使用ASCII字符。
javascript第六章--BOM
admin7311的博客
11-15 83
① window对象 ② location对象 ③ navigator对象 ④ screen对象 ⑤ history对象 转载于:https://www.cnblogs.com/wuzhendong/p/7839119.html
accp 5.0 s2 javascript 第六章
02-04
在"accp 5.0 s2 javascript 第六章"的学习中，我们聚焦于JavaScript这一强大的编程语言，特别是在上机阶段。JavaScript是互联网应用开发的关键技术，尤其在网页动态交互方面有着不可替代的作用。本章的内容可能包括...
JavaScript Event学习第六章 事件的访问
10-29
### JavaScript Event学习第六章 事件的访问 #### 知识点概述 在JavaScript开发中，事件处理是一项核心技能。理解如何有效地访问事件对象是优化用户体验、实现复杂交互的基础。本章节将详细介绍如何在不同的浏览器...
JavaScript 1.8.5 英文第六章 JavaScript的严格模
10-31
JavaScript 1.8.5 英文第六章 JavaScript的严格模式与迭代迭代
网页设计与制作（HTML+CSS+JS）-3期（KC003） 网页设计与制作 html5+CSS3+JavaScript 第6章
07-14
6. `background-position:5px -10px;`意味着背景图片向左偏移5px，向上偏移10px。 7. `#container, .main{font-size:12px;}`表示同时设置ID为`container`和类名为`.main`的元素的字体大小；而`#container .main{font...
第6章 JavaScript脚本语言1
08-08
5. **循环与break语句**：在JavaScript的`for`循环中，如果`i`等于6，`break`语句会终止循环。因此，当`i时，`j`的值会在循环中增加5次，最终`j`的值为5。正确答案是A。 6. **jQuery入口点**：jQuery代码通常放在`$...
vue ref和reactive区别
灰海
08-25 6648
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
m0_54066656的博客
08-27 2170
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1146
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
layui栅格布局设置列间距不起作用
gc_2299的博客
08-26 943
记录layui栅格布局设置列间距不起作用的解决办法
vue3+vant4父组件点击提交并校验子组件form表单
最新发布
liuzaixi的博客
08-30 307
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 710
vue.js 3
vue part 5
E___V___E的博客
08-29 854
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
echarts组件——饼图
weixin_42255789的博客
08-28 306
饼图
权威指南：第六版JavaScript深度解析
"《JavaScript权威指南》第六版是编程领域的经典之作，由David Flanagan编著，全面涵盖了JavaScript语言的深度和广度。这本书以其详尽的内容和深入浅出的讲解，适合读者将每一章作为独立的学习材料，逐步深入理解。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值