004 DOM01

一：说明

1.Js的三个部分

　　ECMAScripts标准：JS的基本语法

　　DOM：文档对象模型，操作页面的元素的

　　BOM：浏览器对象模型，操作浏览器

2.术语

　　文档：一个页面就是一个文档

　　元素：页面中的所有标签都是元素，元素可以看成对象

　　节点：页面中的所有内容都是节点

　　属性：标签的属性

二：初次体验DOM

1.程序

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script>

     </script>

 </head>

 <body>

     <input type="button" value="按钮弹出" onclick="alert('CJ')">

 </body>

 </html>

　　优化版本：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="按钮弹出" id="demo">

     <script>

         function click(){

             alert("CJ");

         }

         var registEvent = document.getElementById("demo");

         //给按钮注册事件，注意点是不加括号，先不执行，在点击的时候才执行

         registEvent.onclick=click;

     </script>

 </body>

 </html>

　　再次优化：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="按钮弹出" id="demo">

     <script>

         var registEvent = document.getElementById("demo");

         //给按钮注册事件，使用匿名函数

         registEvent.onclick = function click(){

             alert("CJ");

         };

     </script>

 </body>

 </html>

三：案例【基本标签，表单，样式】

1.单击按钮，显示图片

　　获取img的对象，然后操作里面的属性即可。

　　其中，宽度，高度不需要加px单位。

　　程序：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="显示图片" id="btn">

     <br>

     <img src="" alt="" id="im">

     <script>

         var btn = document.getElementById("btn");

         btn.onclick=function () {

             var im = document.getElementById("im");

             im.src = "image/00_1.png";

             im.width = 500;

         }

     </script>

 </body>

 </html>

　　效果：

2.点击按钮，修改p标签中的内容

　　使用innerTxet。凡是成对的标签，中间的文本，设置的时候，都使用innerText这个属性放入方式。

　　程序：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="显示图片" id="btn">

     <br>

     <p id="p1">哈哈</p>

     <script>

         var btn = document.getElementById("btn");

         btn.onclick=function () {

             var p1 = document.getElementById("p1");

             p1.innerText="嘿嘿";

         }

     </script>

 </body>

 </html>

　　效果：

3.点击按钮，修改a标签的地址，与热点文字

　　程序：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="显示" id="btn">

     <br>

     <a href="www.baidu.com" id="a1">百度</a>

     <script>

         var btn = document.getElementById("btn");

         btn.onclick=function () {

             var a1 = document.getElementById("a1");

             a1.innerText="新浪";

             a1.href ="https://www.sina.com.cn/";

         }

     </script>

 </body>

 </html>

　　效果：

4.给多个p设置文字

　　程序：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="显示" id="btn">

     <br>

     <p>AAAAA</p>

     <p>BBBBB</p>

     <p>CCCCC</p>

     <div>

         <p>DDDDDD</p>

     </div>

     <script>

         var btn = document.getElementById("btn");

         btn.onclick=function () {

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

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

                 p1[i].innerText="XXYYZZ";

             }

         }

     </script>

 </body>

 </html>

　　效果：

5.只修改div中的p标签

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="显示" id="btn">

     <br>

     <p>AAAAA</p>

     <p>BBBBB</p>

     <p>CCCCC</p>

     <div id="div">

         <p>DDDDDD</p>

     </div>

     <script>

         var btn = document.getElementById("btn");

         btn.onclick=function () {

             var p1 = document.getElementById("div").getElementsByTagName("p");

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

                 p1[i].innerText="XXYYZZ";

             }

         }

     </script>

 </body>

 </html>

　　效果：

6.单机按钮，修改文本框中的文本

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="显示" id="btn"><br>

     <input type="text" value="111"><br>

     <input type="text" value="111"><br>

     <input type="text" value="111"><br>

     <input type="text" value="111"><br>

     <input type="text" value="111"><br>

     <input type="text" value="111"><br>

     <script>

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

             var input = document.getElementsByTagName("input");

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

                 if(input[i].type!="button"){

                     input[i].value = "zzzzz";

                 }

             }

         }

     </script>

 </body>

 </html>

　　效果：

7.点谁，谁变化

　　在变化的时候，使用for循环，将其他的还原，当前元素才变化。

　　注意是，使用this，如果使用btns[i]，则在页面加载完成后，点击执行，i=6了。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="没中"><br>

     <input type="button" value="没中"><br>

     <input type="button" value="没中"><br>

     <input type="button" value="没中"><br>

     <input type="button" value="没中"><br>

     <input type="button" value="没中"><br>

     <script>

         //获取所有的按钮，然后分别注册事件

         var btns = document.getElementsByTagName("input");

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

             //所有的都置为没中

             btns[i].onclick=function () {

                 for (var j=0;j<btns.length;j++){

                     btns[j].value="没中";

                 }

                 this.value="中了";

             }

             //当前的是中

         }

     </script>

 </body>

 </html>

　　效果：

8.切换图片

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         img {

             width: 300px;

         }

     </style>

 </head>

 <body>

     <a href="#">

         <img src="data:image/00_1.png" alt="" id="img">

     </a>

     <script>

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

             this.src = "image/00_2.jpg";

         }

     </script>

 </body>

 </html>

9.修改div的样式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="设置样式" id="btn">

     <div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>

     <script>

         var btn=document.getElementById("btn");

         btn.onclick=function () {

             var div = document.getElementById("di");

             div.style.width="400px";

             div.style.height="300px";

             div.style.backgroundColor="red";  //在Js中，将会将原来的-去掉，然后驼峰式。

         }

     </script>

 </body>

 </html>

　　效果：

10.影藏与显示

　　影藏：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="设置样式" id="btn">

     <div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>

     <script>

         var btn=document.getElementById("btn");

         btn.onclick=function () {

             var div = document.getElementById("di");

             div.style.display="none";

         }

     </script>

 </body>

 </html>

　　显示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="影藏" id="btn1">

     <input type="button" value="显示" id="btn2">

     <div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>

     <script>

         //影藏

         var btn1=document.getElementById("btn1");

         btn1.onclick=function () {

             var div = document.getElementById("di");

             div.style.display="none";

         }

         //显示

         var btn2=document.getElementById("btn2");

         btn2.onclick=function () {

             var div = document.getElementById("di");

             div.style.display="block";

         }

     </script>

 </body>

 </html>

　　效果：‘

　　使用一个按钮：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="影藏" id="btn3">

     <div id="di" style="width:200px;height: 100px;background-color: darkseagreen"></div>

     <script>

         //一个按钮

         var btn3=document.getElementById("btn3");

         btn3.onclick=function () {

             var div = document.getElementById("di");

             if(this.value=="影藏"){

                 div.style.display="none";

                 this.value="显示"     //使用this

             }else{

                 div.style.display="block";

                 this.value="影藏"

             }

         }

     </script>

 </body>

 </html>

11.操作class

　　设置元素的样式，不用class关键字，使用className

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .cc {

             width: 300px;

             height: 200px;

             background-color: #ccc;

         }

     </style>

 </head>

 <body>

     <input type="button" value="影藏" id="btn3">

     <div id="di"></div>

     <script>

         var btn3=document.getElementById("btn3");

         btn3.onclick=function () {

             document.getElementById("di").className="cc";

         }

     </script>

 </body>

 </html>

004 DOM01的更多相关文章

[网站公告]3月10日23:00-4:00阿里云SLB升级，会有4-8次连接闪断
大家好,阿里云将于3月10日23:00-4:00对负载均衡服务(SLB)做升级操作,升级期间SLB网络连接会有约4-8次闪断.由此给您带来麻烦,敬请谅解! 阿里云SLB升级公告内容如下: 尊敬的用户: ...
《zw版·Halcon-delphi系列原创教程》 Halcon分类函数004·edge，边缘处理
<zw版·Halcon-delphi系列原创教程> Halcon分类函数004·edge,边缘处理为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“ ...
Python练习题 004：判断某日期是该年的第几天
[Python练习题 004]输入某年某月某日,判断这一天是这一年的第几天? ---------------------------------------------- 这题竟然写了 28 行代码! ...
[反汇编练习] 160个CrackMe之004
[反汇编练习] 160个CrackMe之004. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
[置顶] cocos2d-x 3.0游戏开发xcode5帅印博客教学 004.[HoldTail]主角的上下飞行跟移动
cocos2d-x 3.0游戏开发xcode5帅印博客教学 004.[HoldTail]主角的上下飞行跟移动写给大家的前言,在学习cocos2d-x的时候自己走了很多的弯路,也遇到了很多很多问题,不 ...
逆向project第004篇：令计算器程序显示汉字（下）
一.前言钩子技术是一项很有有用价值的技术.在Windows下HOOK技术的方法比較多,使用比較灵活,常见的应用层的HOOK方法有Inline HOOK(详见<反病毒攻防研究第012篇:利用In ...
2017-2018-1 1623 bug终结者冲刺004
bug终结者冲刺004 by 20162322 朱娅霖整体连接简要说明目前,我们已经完成了欢迎界面,主菜单界面,排行榜界面,选项界面,胜利界面,地板类.小人类.墙体类.箱子类和虚拟按键类. 主 ...
『练手』004 Laura.SqlForever如何扩展导航栏工具栏右键菜单插件
004 Laura.SqlForever如何扩展导航栏工具栏右键菜单插件导航栏插件扩展比如下图的窗口 > 关闭所有文档这个导航栏: 在任何程序集,任何命名空间,任 ...
maven私库nexus2.3.0-04迁移升级到nexus-3.16.1-02（异机迁移备份）
环境信息: nexus2.3.0-04安装在32位Windows server 2003系统上安装位置信息如下: 仓库迁移 Nexus的构件仓库都保存在sonatype-work目录中,nexus2 ...

随机推荐

【转载】用户通过WEB方式更改AD域帐户密码
用户改自己的域帐户密码一般通过以下几种方式: 加域的PC,用户直接按:Ctrl+Alt+Del键,点击:更改密码通过exchange owa更改密码让管理员重置密码除了以上方式外,很多企业通过开 ...
JVM参数优化（基础篇）
原文:https://www.howardliu.cn/java/jvm-tuning-basic/ 这几天压测预生产环境,发现TPS各种不稳.因为是重构的系统,据说原来的系统在高并发的时候一点问题没 ...
51nod 2517 最少01翻转次数
小b有一个01序列,她每次可以翻转一个元素,即将该元素异或上1. 现在她希望序列不降,求最少翻转次数. 收起输入第一行输入一个数n,其中1≤n≤20000: 第二行输入一个由‘0’和‘1’组成 ...
Sharding-JDBC（二）2.0.3版本实践
目录一.Sharding-JDBC依赖二.分片策略 1. 标准分片策略 2. 复合分片策略 3. Inline表达式分片策略 4. 通过Hint而非SQL解析的方式分片的策略 5. 不分片的策略 ...
Java静态代理与动态代理理解与应用场景
角色抽象角色:接口类实现角色: 实现类代理角色:代理实现的类,最终使用的对象静态代理 1. 接口 /** * description * * @author 70KG * @date 2018 ...
drf框架 - JWT认证插件
JWT认证 JWT认证方式与其他认证方式对比: 优点 1) 服务器不要存储token,token交给每一个客户端自己存储,服务器压力小 2)服务器存储的是签发和校验token 两段算法,签发认证的效 ...
k8s-yaml
apiVersion: v1 #指定api版本,此值必须在kubectl apiversion中 kind: Pod #指定创建资源的角色/类型 metadata: #资源的元数据/属性 name: ...
Deepgreen/Greenplum 删除节点步骤
Deepgreen/Greenplum删除节点步骤 Greenplum和Deepgreen官方都没有给出删除节点的方法和建议,但实际上,我们可以对节点进行删除.由于不确定性,删除节点极有可能导致其他的 ...
JS基础_自增和自减
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
P1903 [国家集训队]数颜色 (带修改莫队)
题目描述墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...

004 DOM01

004 DOM01的更多相关文章

随机推荐

热门专题