基础篇(四)-JS-BOM

Posted by Suzeyu on 2016-04-13

自学小笔记

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: 屏幕的有效高度,不含任务栏
  • 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():相当于浏览器的后退按钮