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

随机推荐

altium designer的pcb板如何移动到原点？
可以把所有的都选中,然后将光标移到起点处,将所有的移到原点的地方,但这种做法很多时候都不好:比较好的办法就是将原点设置到起点上来. 具体做法是:edit--origin --set. 这时光标成了十字 ...
C++中string::find()函数和string::npos函数的使用
1. string::find()函数和string::npos函数的介绍我们在学习C++的时候必不可少的使用到string类中的find()函数,它是一个查找函数,功能还是很强大的,但是此处我们不 ...
虚拟机安装Linux从零到登陆成功教学
1.Linux Linux使我们出来windows以外可能接触最多的操作系统了,因为好多超级大的互联网公司,比如阿里等就是用Linux的,所以我们最起码要知道怎样去使用,使用的前提就是我们要有一个这样 ...
ArrayList && LinkList
1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为LinkedList ...
JS数组去重整理合集
1.利用splice var arr = [1,2,3,4,5,6,7,8,9,9,8,7,6,5,4,3,2,1]; function repeat(arr){ for(var i = 0;i< ...
Oracle 日期型将timestamp类型转换为date类型
Oracle将timestamp类型转换为date类型有三种方法 1.使用to_char先转为字符型,在使用to_date再转为日期型 select to_date(to_char(systimest ...
Kubernetes 学习16 RBAC
一.概述 1.前面讲过,kubernetes的授权也是基于插件来实现而且用户访问时某一次操作经由某一授权插件检查能通过后就不再经由其它插件检查.然后由准入控制插件再做进一步后续的准入控制检查.那么在他 ...
Windows系统错误处理机制
一.什么是错误意为意为不正确,与正确答案相反.我们这里讲的是Windows操作系统里进程运行时产生的错误.对我们程序员来说,其实也就是我们编程过程中,调用Windows系统提供的API.COM 接口 ...
flask使用模板
flask常用代码模板 from flask import Flask, request,jsonify import requests app = Flask(__name__) @app.rout ...
SpringData 简单的条件查询
今天在写springdata条件查询时,JpaRepository的findOne方法,不知道是因为版本的原因还是其他原因,总是查询不出来数据 //springdata jpa版本为1.5.15,配置 ...

004 DOM01

004 DOM01的更多相关文章

随机推荐

热门专题