网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-BOM的对象_第1页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-BOM的对象_第2页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-BOM的对象_第3页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-BOM的对象_第4页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript对象模型-BOM的对象_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

BOM（BrowserObjectModel）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

JavaScript对象模型BOM的对象目录

JavaScript对象模型9.1BOM的对象9.2DOM的对象9.3DOM与CSS习题99.1BOM的对象9.1.1BOM概述浏览器对象关系的如图所示。9.1BOM的对象9.1.2window对象1.window对象的属性9.1BOM的对象2.window对象的方法9.1BOM的对象【例9-1】显示窗口的宽、高和设置计时器，页面初次加载时依次显示3个的提示框，延时5000ms后再调用hello()函数，显示其对话框，本例文件9-1.html在浏览器中显示的效果，如图所示。9.1BOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">functionhello(){window.alert("欢迎您！");}

window.setTimeout(hello,9000);//延时9000ms后再调用hello()函数

window.alert("窗口的宽="+window.innerWidth);//获得窗口的宽度

window.alert("窗口的高="+window.innerHeight);//获得窗口的高度

mpt("mpt()","默认文本");//js中的提示输入框

</script></head><body></body></html>9.1BOM的对象9.1.3document对象1.document对象的属性9.1BOM的对象2.document对象的方法9.1BOM的对象【例9-2】使用getElementById()、getElementsByName()、getElementsByTagName()方法操作文档中的元素。浏览者填写表单中的选项后，单击“统计结果”按钮，弹出消息框显示统计结果，本例文件9-2.html在浏览器中的显示效果，如图所示。9.1BOM的对象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>document对象</title><scripttype="text/javascript">functioncount(){varuserName=document.getElementById("userName");varhobby=document.getElementsByName("hobby");varinputs=document.getElementsByTagName("input");varresult="ID为userName的元素的值："+userName.value+"\nname为hobby的元素的个数："+hobby.length+"\n个人爱好：";for(vari=0;i<hobby.length;i++){if(hobby[i].checked){result+=hobby[i].value+"";}

}

9.1BOM的对象result+="\n标签为input的元素的个数："+inputs.length;alert(result);}</script></head><body><formname="myform">

用户名：<inputtype="text"name="userName"id="userName"><br>

爱好：<inputtype="checkbox"name="hobby"value="音乐">音乐

<inputtype="checkbox"name="hobby"value="美食">美食

<inputtype="checkbox"name="hobby"value="旅游">旅游<br><inputtype="button"value="统计结果"onclick="count()"></form></body></html>

9.1BOM的对象9.1.4location对象1.location对象的属性9.1BOM的对象2.location对象的方法9.1BOM的对象【例9-3】下面代码通过location.href属性获得当前页面的URL链接，然后重定向并打开百度主页。本例文件9-3.html在浏览器中显示如图9-4所示。<scripttype="text/javascript">window.onload=function(){alert(location.href);location.replace("");}</script>9.1BOM的对象9.1.5navigator对象9.1BOM的对象【例9-4】navigator.userAgent是最常用的属性，用来完成浏览器判断；然后返回客户端浏览器的各种信息。本例文件9-4.html在浏览器中显示如图9-5所示。9.1BOM的对象<scripttype="text/javascript">if(window.navigator.userAgent.indexOf('MSIE')!=-1){alert('我是IE');}else{alert('我不是IE');}document.write(navigator.appName+"<br>");//返回运行浏览器的名称

document.write(navigator.appVersion+"<br>");//返回运行浏览器的平台和版本信息

document.write(navigator.cookieEnabled+"<br>");//返回浏览器中是否启用cookie的布尔值

document.write(navigator.platform+"<br>");//返回运行浏览器的操作系统平台</script>9.1BOM的对象9.1.6screen对象9.1BOM的对象【例9-5】下面代码显示浏览器显示屏幕的宽度和高度、显示器屏幕的宽度和高度，本例文件9-5.html在浏览器中显示如图9-6所示，可以看到浏览器屏幕的高度与显示器的高度相差一个Windows任务栏的高度。<scripttype="text/javascript">document.write(screen.availHeight+"<br>");//返回客户端浏览器显示屏幕的高度

document.write(screen.availWidth+"<br>");//返回浏览器显示屏幕的宽度

document.write(screen.height+"<br>");//返回显示器的高度

document.write(screen.width+"<br>");//返回显示器的宽度</script>9.1BOM的对象9.1BOM的对象9.1.7history对象9.1BOM的对象例如，下面代码在网页中显示网页链接的数量，请输入几个网站后，返回到这个例子，链接数量将改变。document.write(h

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论