javascript的DOM编程

◆DOM编程

1.

为什么要学习DOM编程


通过这种交互操作,可以编写各种网页游戏,乌龟抓鸡,贪吃蛇,推箱子,坦克大战。


2.dom编程,也是学习ajax技术的基础,所以要掌握好dom编程


◆dom编程简介

DOM=Document Object Model(文档对象模型)【可以理解为把html文档当作对象来进行编程的模型】



关系图:



DOM编程,把html文件看作一颗DOM树,按照元素依次列下去,如下图:


再把这些元素当作对象,把他们当作对象之后,就可以对这些元素进行动态的控制,增加减少,修改删除都可以了。


◆bom

bom  (browser object model)浏览器对象模型

因为做浏览器的厂家很多,w3c定义了一个做浏览器的规范,规定:



◆dom对象介绍



◆window对象


1.confirm

案例:

window.confirm("确定要删除吗?");

function test(){
var res=window.confirm("确定要删除吗?");
if(res){
window.alert("删除");
}else {
window.alert("放弃删除");
}
}








2.setInterval()

按照指定的周期(以毫秒计)来循环调用函数或计算表达式

案例1:简单的时钟

function showTime(){
//document.writeln(new Date());
//在元素间的文本就是通过    对象.innerText
document.getElementById("mytime").innerText=new Date().toLocaleString();
}
setInterval("showTime()",1000);






案例2:这里暂时有点问题。

图片滚动播放,可以通过这个做简单的动画效果

代码:

var n=1;
function  run(){
//得到img对象
var myimg=document.getElementById("myimg");
//这里通过((n++%2)+1)的算法得到1,2,1,2循环的数,得意让图片按照文件名的顺序进行播放
//故而,想要得到从1到m循环的整数,可以用算法((n++%2)+1)来实现,要注意这里的循环是从2开始的。如,若m是4,则为:23412341234.....
myimg.src=((n++%2)+1)+".jpg";
}
setInterval("run()",800);










3.clearInterval()  

取消setInterval()的周期性执行,需要setInterval()返回的id做参数


案例:让上边的图片播放几次后停下来:

var n=1;
var count=0;


function  run(){


count++;
if(count==11){
//停止定时器
clearInterval(myTimer);
}
//得到img对象
var myimg=document.getElementById("myimg");
//这里通过((n++%2)+1)的算法得到1,2,1,2循环的数,得意让图片按照文件名的顺序进行播放
//故而,想要得到从1到m循环的整数,可以用算法((n++%m)+1)来实现(n的值为0,1,2,3,……),要注意这里的循环是从2开始的。如,若m是4,则为:23412341234.....
myimg.src=((n++%2)+1)+".jpg";
}
var myTimer=setInterval("run()",800);










4.setTimeout()

在指定的毫秒数后调用函数或表达式(只调用一次)


案例:在打开页面 5 秒后,弹出hello

//5秒后调用sayHello
function sayHello(){
window.alert("Hello");
}

setTimeout("sayHello()",5000);


5.clearTimeout();

取消setTimeout设置的timeout

案例:3秒后显示abc,加上clearTimeout之后取消

function test(){
window.alert("abc");
}
var mytimer=setTimeout("test()",3000);
clearTimeout(mytimer);//取消timeout



6.moveTo();//以屏幕左上角为原点,把窗口的左上角移动到指定的坐标

   moveBy();//以当前窗口的左上角为原点,把窗口的左上角移动到指定的坐标


案例:

//用IE可以,360不行,兼容模式也不行
function test2(){
window.moveTo(50,50);
}




我是一个窗口




7.resizeTo();//把窗口调整到 400,300

   resizeBy();   //把窗口在现有的基础上再增大400,300 

//用IE可以,360不行,兼容模式也不行
function test2(){
window.resizeTo(400,300);
//window.resizeBy(400,300);
}




我是一个窗口




8.open()    开一个新的窗口   

注意:这里的open执行完毕之后会返回一个具体的值,返回一直指向子窗口的变量

这里的open有很多的特征值,可以用来设置打开的新窗口的各种属性,在手册里边有

手册的HTML DOM Window 对象参考手册,open用法这里

案例:

function test2(){
window.open("newwindow.html","_blank","width=50,height=50","location=no","menubar=no","status=no","titlebar=no","toolbar=0");
}





我是一个窗口


9.opener()

综合案例:父窗口和子窗口通信(有点难)

父窗口代码:






我是一个窗口






子窗口代码:


我是新窗口


◆综合案例:

简单的登录系统:

1.登陆界面(login.html)代码:




user:

password:




2.登录成功跳转(loginsuccess.html)页面代码:



登陆成功



将在5秒后自动跳转到管理页面


3.登陆成功之后跳转(afterloginsuccess.html)到的页面代码

管理页面


跳转成功


10.status();

设置窗口状态栏的文本,就是网页最下边的窗口,自己试试


综合练习题:





◆History对象

作用:该对象包含客户端访问过的URL信息,就是返回原来访问过的某个页面

1.back()  加载历史列表中上一个访问过的URL

 2. go()   加载历史列表中的某一个具体的页面

   其实   back()   等价于   go(-1)

3.length()  返回历史列表中URL的数量

4.forward()   加载历史列表中的下一个URL  

调用该方法等价于点击前进按钮,或调用  history.go(1)(这里注意,是曾经访问过,然后跳回来,才能forward,不然浏览器哪里知道你未来会浏览什么页面)


代码:

history1.html:

goto 2

history2.html:



返回上级页面


◆location对象

location包含客户端当前的URL信息(相当于就是网址)

案例:







fsdjkgjklsdjgk





◆navigator对象

navigator对象包含有关浏览器的信息


案例:









◆screen对象

该对象包含有关客户机显示屏幕的信息,比如当前显示器的分辨率

用该对象的各种属性,可以返回当前屏幕的信息

案例:









◆event对象

该对象代表事件的状态,比如事件在其中发生的元素,键盘按键的状态,鼠标的位置,鼠标按钮的状态,事件通常与函数结合使用。

在事件驱动变成里讲过了。


如何绑定事件监听:

(1)直接和某个html控件绑定,比如:

(2)通过getElementById()获取到元素后再绑定监听

案例:











(3)如果我们有一个投票系统,只能投一次票,按键只能按一次。


下边我们使用IE中独有的监听方法,做了案例,如果其他浏览器可以用上边的W3C标准方法。

使用:attachEvent("onclick",test);  和  detachEvent("onclick",test);

案例:











(4)要求一个文本框,只能输入数字,输入其他的会提示并且无法输入:

案例:














◆document对象


定义:document对象代表整个html文档,因此可以去访问到文档中的各个对象(元素)。


1.write()

向文档输出文本或者是js代码

2.writeln

向文档输出文本或者是js代码,与write不一样的地方是,writeln是换行输出。

比如:

document.write("hello");document.writeln("ok");

输出效果:

hello

ok

显示换行,但是对浏览器来说,输出效果没有区别。


3.getElementById()

(1)规定html文档中,要唯一,若不唯一,只取第一个元素。

(2)id不要用数字开头


4.getElementsByName()    注意拼写,是Elements,拼错无法使用

通过元素的名字来获取对象集合

案例:







请选择你的爱好
足球
旅游
游泳
音乐






5.getElementsByTagName()        注意拼写,是Elements,拼错无法使用

通过标签名称来获取对象集合

案例:











◆如何动态的创建html元素

举例说明:

动态的添加到document文档中,可以添加各种元素

还可以动态的删除已经添加的新元素,同时还可以通过添加的子元素,得到父元素

案例:

 









div


◆对DOM的加强

在dom编程中,一个html文档会被当作一颗dom树,dom会把所有html元素,注释,换行映射成Node节点,于是你就可以使用Node节点(对象)的属性和方法


上边这些,再补上一个属性:   parentNode


通过上边这些属性,可以得到该节点的父节点,子节点,兄弟节点等等。通过上述方法,可以添加删除节点等。


◆document的属性:


案例:






fdsghsd g



◆body对象的说明

1.引用body对象前,要先创建body,在head里边引用body,那时候body还没建立,所以会显示空。

2.注意,这里的appendChild()   和   removeChlid()   是所有节点共有的,body用的比较多所以放在这里了


这里有很多方法,我们用过了,所以这里我们强调innerText() 和innerHtml

案例:











body的事件:


用法:


综合案例:弹来弹去的小太阳

代码:



小太阳










◆style对象


坦克转向:

讲解背景的样式:

思路一:

做一个坦克的四个方向,然后当转向的时候,换图片,就跟之前的图片轮流显示类似。

这种思路的话,每次转向,都会向服务器发送请求加载新的图片,不划算


思路二:

一次加载一个背景图,通过显示该背景图片的不同部分,实现转向的效果

思路二代码:


















解释:div中的图片tanksucai.png,如下图:


是由四个方向的坦克所组成的一个图片,将这个图片,作为div的背景图片,即background-image:url('tanksucai.png'),这时候,其实可以看作div里边不只插入了一个背景图片,而是无数多个排列的背景图,其他的默认暂时没有显示。此时,我们设置div的大小,让其刚好只能显示一个图片的其中一个坦克,再使用background-position-Y:0px,也就是显示这个图片最上边的坦克,即方向向上的。接下来,通过函数,改变background-position-Y的值,就可以显示图片四个坦克其中的一个,这里需要特别注意的是他的坐标:默认div左上角跟背景图片的左上角重合,且为坐标原点,程序中默认设置为0px,即默认显示向上的坦克。Y向下为正,向上为负。此时我们如程序所写的,tank.style.backgroundPositionY="196px";也就是将图片向下移动一个坦克的高度,这时候,会显示这张图片上的另一张4坦克背景图的最下边的坦克。相当于默认显示的图片向下移之后,在它上边的图片,跟着掉下来了。




接下来,再做一个开坦克的案例,即可以转向和移动,以后还可以扩展到打子弹:

代码:



开坦克
















◆综合案例:

仿sohu的频道切换效果,如图:


代码:

仿sohu的div切换.html:













  • 热销

  • 新盘

  • 家装

  • 二手房

































仿sohu的div切换.css:

.body{
font-size:12px;
}


.div1{
width:170px;
height:280px;
/*background-color:pink;*/
}

.navi{
width:21px;
height:224px;
float:left;
/*background-color:black;*/
}

.navi ul{
padding:0px;
margin-left:0px;/*这里把ul自带的东西清零*/
margin-top:0px;
}

.navi ul li{
list-style-type:none;/*这里是无序列表前边加什么标志,改为什么都不加*/
width:21px;
height:62px;
margin-top:5px;
margin-left:1px;
background-color:silver;
text-align:center;
padding-top:3px;
}

.rx,.xp,.jz,.rsf{
width:130px;
height:280px;
/*background-color:yellow;*/
float:left;
margin-left:7px;
}

.rx ul,.xp ul,.jz ul,.rsf ul{
padding:0px;
margin-left:0px;/*这里把ul自带的东西清零*/
margin-top:0px;
float:left;
}

.rx ul li,.xp ul li,.jz ul li,.rsf ul li{
list-style-type:none;
width:128px;
text-align:center;
line-height:34px;
}

.xp{
display:none;
}
.jz{
display:none;
}
.rsf{
display:none;
}



◆综合案例:简单的购物车

代码:



 
    mycart.html

   
   
   
    
   

 
  
 
   

我的购物车


    苹果  10元

       香蕉  20元

          西瓜  30元

             栗子  40元

                哈密瓜  50元

   全选
   取消

   全选
   
    总价格是0元
 



◆forms对象集合/form对象

forms对象集合有

length:返回大小

item(index):指定去除forms对象集合中的第几个form对象

说明:当访问某个表单的某个元素的时候,可以使用下面两种方法:

1.document.forms[第几个表单].元素的名字

2.document.forms.item[第几个表单].元素的名字


简单案例:



 
    from1.html

   
   
   
    
   



 
 
  
 

个人信息


   
    U:

    P:

   
   

    
 

兴趣爱好


   

    爱好1:

    爱好2:

   
   

    
   
    
 



◆表单的验证综合案例:用户注册


要求:当用户再提交表单的时候,若信息填写错误,则要给出相应的提示。

代码:

register.html文件:



 
    register.html

   
   
   
    
   


 
 
 
 
   

用户注册


    >
   

   
   
     
     
       
       
         
         
     
用户名
密 码
确认密码
年 龄
电子邮件
电话号码

     

 


注意:再验证表单的时候,可以在


也可以在

两种方法是等价的




register.css文件:

input{
width: 180px;
}
.td1{
width: 80px;
}
.td2{
width: 380px;

}
#span1,#span2,#span3{
font-size:10px;
color: red;
}


◆images对象

代表一个图片,出现一次就会创建一个img对象,常用的就不列举了。

特别说明:

img中有两个事件,在这里提示一下

οnerrοr="test1()"    当图片加载失败的时候,调用函数test1

οnlοad="test2()"     当图片加载成功的时候,调用函数test2 


◆links对象

超链接


◆all对象

可以通过all对象,访问整个html文件的所有节点,遍历整个文件的时候可以用,很少用。


◆table对象

 rows[]  表格中所有行的一个数组(针对表格

 cells[]  表格中所有单元格的一个数组(针对一行)


加添,删除行,案例:



 
    table.html

   
   
   
   


 
 
   

英雄排行榜


   
   
   
   
   
排名姓名称号
1松江及时雨
2卢俊义玉麒麟

   
     
      
 



对表格进行添加元素:且当排名重复时提醒:

代码:



 
    table2.html

   
   
   
    
   

 
  
 
   

英雄排行榜


   
   
   
   
   
排名姓名称号
1松江及时雨
2卢俊义玉麒麟

   

请输入新英雄


    编号
 
    名字
 
    外号
 
     
 
 










本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部