基础篇(四)-JS-BOM

2016-04-13 约 1950 字预计阅读 4 分钟次阅读

自学小笔记

BOM Browser Object Model 浏览器对象模型

BOM主要提供了访问和操作浏览器各组件的方式。

浏览器组件：window(浏览器窗口)、location(地址栏)、history(浏览历史)、screen(显示器屏幕)、navigator(浏览器软件)、document(网页)

window是最顶层的。其余的组件都是window的子组件。

那么各个之间的对象有层级关系，该如何访问呢？

window.document.write("OK");
window.document.body.bgColor="#ff0000";

window对象是所有其他对象的最顶层对象，因此可以省略。

document.write("ok");
document.body.bgColor = "#ff0000";
alert("OK");

循环遍历window对象的所有属性

js可以使用for in循环。

for(name|index in obj|arr){
	
}
//只能循环数组的下标，或对象的属性
//如果循环数组的话，每次循环将取下角标 ,如果数组中的值为undefined则不会循环。
//如果循环对象的话，每次循环取对象属性

windown常用属性

name:指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性用的

设置窗口的名字：window.name = "newWIN";
获取窗口的名字：window.name;

top:代表最顶层窗口。如window.top

parent:代表父级窗口，主要用于框架。

self:代表当前窗口，主要用于框架中。

innerWidth():指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏),该属性Firefox支持。

在IE下，使用document.documentElement.clientWidth.

innerHeight():至浏览器窗口的内高不含菜单栏、工具栏、地址栏、状态栏),该属性Firefox支持。

在IE下，使用document.documentElement.clientWidth.

  document.documentElement	//指的是<html>标记对象。
  document.body		//就是<body>标记对象。

alert():弹出一个警告对话框。

prompt():弹出一个输入对话框。

confirm():弹出一个确认对话框。点击确认返回true。

close():关闭窗口。

print():打印窗口。

open():打开一个新的浏览器窗口。

语法：var winObj = window.open(url,name,options);
url: 准备在新窗口中显示那个文件。url可以为空字符串，表示显示一个空的页面。
name: 新窗口的名字，该名字给<a>标记的target属性来用。
options: 窗口的规格。有width,height,left,top, menubar(显示菜单栏? 取值:yes/no),toolbar(显示工具栏? 取值:yes/no),location(显示地址栏? 取值:yes/no),status(显示状态栏? 取值:yes/no)
```
  var winObj = window.open(mUrl,mName,"width=400,height=300");
```

onload 事件: 当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件。通过onload事件属性，去调用JS的函数，onLoad属性只有body标记才有。

setTimeout()

功能: 设置一个延时器。只执行一次！！

语法:var timer = window.setTimeout(code,millisec);

参数:

code: 是任何合法的JS代码，一般情况下是JS函数，该函数要放在引号中。

  window.setTimeout("close()",2000);
  window.setTimeout(init,2000);	//传函数地址，因此不需要加括号。如果加括号，是讲函数的执行结果传到方法中。

返回值: 返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。

clearTimeout()

功能:清除延时器id变量

定时器方法

setInterval();

功能: 设置一个定时器，定时器，重复不断的执行JS代码(周期性)。
语法: var timer = window.setInterval(code,milliesc);

参数:

code: 是任何合法的JS代码，一般情况下是JS函数，该函数要放在引号中。

  window.setInterval("init()",2000);
  window.setInterval(init,2000);	//传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。

返回值: 一个定时器的id变量，这个id变量给clearInterval()用来清除。

clearInter val()清除定时器的id变量

定时器总是调用其他函数，延时器总是调用自己所在的函数

JS中函数传递时如果带()说明传递函数的结果，如果不带()那么就传递空间地址值

SCREEN 屏幕对象

width: 屏幕的宽度，只读属性
height: 屏幕的高度，只读属性
availWidth: 屏幕的有效宽度，不含任务栏
availHeight: 屏幕的有效高度，不含任务栏

navigator对象（不重要）

appName：浏览器软件名称，Microsoft Internet Explorer；Netscape。
appVersion：
systemLanguage：
userLanguage：
platform：

Location地址栏对象

href: 获取地址栏中的完整地址。可以实现JS网页跳转。location.href="rul";
host: 主机名
hostname: 主机名
pathname: 文件路径及文件名
search: 查询字符串
protocol:协议 http:// ftp://
hash:锚点名称
reload([true]): 刷新网页 true表示强制刷新。

history对象

length: 历史记录的个数
go(n):可以实现前进和后退。n为0刷新网页，-1后退，1前进一步，3前进3步
forward():相当于浏览器的“前进”按钮
back():相当于浏览器的后退按钮

目录