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

随机推荐

使用IDEA将springboot框架导入的两种方法
第一种新建Maven,导入springboot所依赖的jar包 1.新建一个maven项目,下一步命名,保存文件地址,点击完成 2.进去springboot下载(点击进入),复制p ...
Qt5安装及组件选择（Qt 5.12.0）
组件选择如下图所示,安装Qt时有选择组件这一步,全部安装未免太占磁盘控件,只需安装我们所需要的组件即可.接下来就分析分析各个组件的作用及含义. “Qt 5.12.0”节点下面是 Qt 的功能模块,包 ...
MPU-6050
MPU-6000(6050)为全球首例整合性6轴运动处理组件,相较于多组件方案,免除了组合陀螺仪与加速器时间轴之差的问题,减少了大量的封装空间.当连接到三轴磁强计时,MPU-60X0提供完整的9轴运动 ...
gradle 构建scala程序
一.build.gradle 二.gradle build ===================== 执行scala scala main.scala
织梦CMS5.7主动推送二次开发
今天一个朋友叫我写个织梦的百度主动推送插件,实现的功能是:每发表或者更新一篇文章,都会触动主动推送,达到资源最新提交给百度进行抓取. 案例站点:奇迹私服第一步:登入FTP,在/后台的文件夹/arti ...
react 学习记录
1. 脚手架搭建项目 create-react-app https://www.jianshu.com/p/d196761c8332 2. UI框架 https://ant.design/docs ...
Codeforces Round #604 (Div. 2) E. Beautiful Mirrors
链接: https://codeforces.com/contest/1265/problem/E 题意: Creatnx has n mirrors, numbered from 1 to n. E ...
placeholder这个属性 input
input是一个很常见的标签,大家使用的也很常见,但是我在具体的工作中发现要想完美的使用这个标签还是任重而道远,下面是我碰到的几个问题. 1.我们在使用这个标签的时候会习惯的加上placeholder ...
JavaScript基础——数组
一 .数组的介绍 1.概念:数据的集合,任何数据都可以放在数组中 2.作用:可以同时操作多个数据 3.数组的创建: 字面量:var arr = [ ]; 构造函数:var arr = new Arra ...
YAML_15 include and roles
在编写playbook的时候随着项目越来越大,playbook越来越复杂.可以把一些play.task 或 handler放到其他文件中,通过包含进来是一个不错的选择. roles像是加强版的incl ...

004 DOM01

004 DOM01的更多相关文章

随机推荐

热门专题