网页设计与制作教程——Web前端开发 第7版 课件 第9章 JavaScript对象模型.pptx

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

目录第9章JavaScript对象模型9.1BOM的对象9.2DOM的对象9.3DOM与CSS习题9

9.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的对象!DOCTYPEhtmlhtmlheadmetacharset=utf-8title/titlescripttype=text/javascriptfunctionhello(){window.alert(欢迎您！);}window.setTimeout(hello,9000);//延时9000ms后再调用hello()函数window.alert(窗口的宽=+window.innerWidth);//获得窗口的宽度window.alert(窗口的高=+window.innerHeight);//获得窗口的高度mpt(mpt(),默认文本);//js中的提示输入框/script/headbody/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的对象!DOCTYPEhtmlhtmlheadmetacharset=utf-8titledocument对象/titlescripttype=text/javascriptfunctioncount(){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;ihobby.length;i++){if(hobby[i].checked){result+=hobby[i].value+;}}

9.1BOM的对象result+=\n标签为input的元素的个数：+inputs.length;alert(result);}/script/headbodyformname=myform用户名：inputtype=textname=userNameid=userNamebr爱好：inputtype=checkboxname=hob