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

随机推荐

2013.4.23 - KDD第五天
今天晚上郭宇航师兄从外面回来问我那天找他什么事,然后我们就开始讨论KDD的第一个题目,其实第一个题目跟郭师兄的课题不太相关,本来想问他关于语义消岐的那道题(第二道),不过第二题的内容我给忘了,然后我 ...
JVM的深入理解：由一次Quartz的定时任务引发的“A cannot cast to A”的问题
由Quartz框架引发的“A cannot cast to A”的问题起因与问题描述向新开的项目中添加定时任务,部署集群,添加了热加载(springboot-dev-tools),发现在转型时候出 ...
new 运算符的原理
关于 new 运算符的原理: 1.红宝书上解释: (1)创建一个新对象 (2)将构造函数的作用域赋给新对象 (3)执行构造函数中的代码 (4)返回新对象 2.MDN上的解释: (1)一个继承自 Foo ...
CH6803 导弹防御塔
6803 导弹防御塔 0x60「图论」例题背景 Freda的城堡-- "Freda,城堡外发现了一些入侵者!" "喵...刚刚探究完了城堡建设的方案数,我要歇一会儿嘛l ...
oracle中日期相关的区间
and czrqb.lsrqb_rh_sj >= to_date('[?query_date_begin|2011-09-01?]A', 'yyyy-mm-dd') and czrqb.lsrq ...
js判断一个数是不是正整数
js判断一个数是不是正整数 function isPositiveNum(s){//是否为正整数 var re = /^[0-9]*[1-9][0-9]*$/ ; return re.test(s) ...
Exec Maven插件
1.为什么使用exec? 现在的工程往往依赖众多的jar包,不像war包工程,对于那些打包成jar包形式的本地java应用来说,通过java命令启动将会是一件极为繁琐的事情,原因很简单,太多的依赖 ...
Kubernetes 基本概念介绍
什么是Kubernetes? Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展. 如果你曾经用过Docker容器技术部署容器,那么可以将Docker看成 ...
django模型类
模型类 ORM django中内嵌了ORM框架,ORM框架可以将类和数据表进行对应起来,只需要通过类和对象就可以对数据表进行操作. 在Django中主要是设计类:模型类. ORM另外一个作用:根据设计 ...
node gyp编译所需要的环境
安装ms的build工具包,自带python npm install --global --production windows-build-tools

004 DOM01

004 DOM01的更多相关文章

随机推荐

热门专题