韩顺平 javascript教学视频_学习笔记25_bom介绍_dom对象层次图_dom对象（window对象1）

来源：互联网发布：淘宝运营工资6000高吗编辑：程序博客网时间：2024/05/22 17:19

内容介绍

Bom 介绍----浏览器对象模型

因为做浏览器的厂商比较多，浏览器也应该有一个规范，这是W3C又出来了，制订了一个做浏览器规范。

bom提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）。

文档结构图

BOM由一系列相关的对象组成。下图展示了基本的BOM体系结构。

BOM中的对象

Window对象：

是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。Window对象表示整个浏览器窗口，但不必表示其中包含的内容。

Document对象：

实际上是window对象的属性。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。

Location对象：

它是window对象和document对象的属性。Location对象表示载入窗口的URL，此外它还可以解析URI.

Navigator对象：

Navigator包含大量Web浏览器相关的信息。各种浏览器支持该对象的属性和方法不尽相同。

Screen对象：

通过其可以获取用户屏幕相关的信息

dom对象简介

下面开始讲重点，先讲window对象

dom对象详解----window对象

在使用window对象的方法和属性时，可以不带window，不带window就是默认为window。

window对象的常用方法1：

confirm()方法

function test(eventObj){ //confirm方法var res=window.confirm("你确定要删除吗？");if(res){window.alert("删除成功");}else {window.alert("取消删除");}}

setInterval()方法和 clearInterval()方法

setInterval()函数可以根据指定的时间，循环执行某个函数，或者表达式

clearInterval() 方法可取消由 setInterval() 设置的 timeout

看一个案例：

<html>  <head>  <script language="javascript">   function showTime(){ document.getElementById("mytime").innerText=new Date().toLocaleString();}setInterval("showTime()",1000);//让图片动起来var n=0;var count=0;function runphoto(){count++;if(count==10){clearInterval(mytimer);}var myimg=document.getElementById("myimg");myimg.src=((n++%4)+1)+".png";}var mytimer=setInterval("runphoto()",500);</script>  </head>  <body > <span id="mytime"></span><img src="1.png" id="myimg"></img></body>  </html>

setTimeout() 和 clearTimeout() 方法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，只调用一次

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout

<html>  <head>  <script language="javascript">   //让图片循环动起来var n=0;var count=0;function runphoto(){count++;if(count==10){clearInterval(mytimer);setTimeout("reRun()",2000);count=0;}var myimg=document.getElementById("myimg");myimg.src=((n++%4)+1)+".png";}var mytimer=setInterval("runphoto()",500);function　reRun(){mytimer=setInterval("runphoto()",500);}</script>  </head>  <body > <span id="mytime"></span><img src="1.png" id="myimg"></img></body>  </html>

2 0