Javascript Browser Object Model

BOM是browser object model的缩写,简称浏览器对象模型

Document对象常见属性和方法

wondow.onload事件:当页面加载完成做一些事情

links      链接对象
anchors    锚对象
forms      表单对象
images     图片对象

document对象能反映当前页面的各种属性

document对象的常用属性

title:显示文章的标题。
body:获取body元素节点。
bgColor:显示页面的背景色。
fgColor:显示页面的前景色。

document对象的常用方法

write():在页面中输出文本。
writeln():在页面中输出文本,并自动换行(多一个换行符,看不出来)。

访问表单的方式

document.forms[索引]:获取当前页面中的第几个表单(索引从0开始).
document.表单名称:
document.getElementById("表单的id值");

window.onload事件

window.onload = function(){
     //处理文档加载完之后的操作.
};

消息框/输入框/确认框

alert(‘信息’):消息框
//alert("你好1");
prompt(‘提示信息’,默认值): 标准输入框
//var inputText = prompt("请输入你的名字","孙悟空");
confirm( )  : 确认框
//var ret = confirm("亲,你确定删除吗?");

打开新窗口/关闭窗口

window.open()方法:打开一个新窗口

调用示例:

window.open("https://coding.ee/", "_blank","")

第一个参数:要打开的网页url,可以是相对路径;
第二个参数:打开窗口的目标;除了自定义名称以外,还包括_self, _parent, _top及_blank几个特殊值;
第三个参数:是一个使用,组成的字符串,用于描述打开窗口的特性,比如大小、是否有工具栏等。

function openWin() {
    open("newWin.html");
}
close( ):关闭窗口
function closeWin() {
    close();
}

在非IE浏览器中,close方法,不能关闭非js代码打开的窗口.
在W3C规范的浏览器中(非IE):close方法只能关闭open方法打开的窗口.

窗口大小和位置设定

// IE中有效
// moveBy(dx, dy)-移动偏移量
// moveTo(x, y)-移动到指定座标
// resizeBy(dw, dh)-窗口大小改变
// resizeTo(w, h)-窗口大小改变

浏览器位置(IE兼容):

获得窗口在屏幕上的位置

IE:
screenLeft -获得窗口所在X坐标值
screenTop -获得窗口Y坐标值
W3C:
screenX -获得窗口所在X坐标值
screenY -获得窗口Y坐标值

function getWindowSize() {
    var x = window.screenX || window.screenLeft  || 0;
    var y = window.screenY || window.screenTop  || 0;
    alert("X坐标=" + x + ", Y坐标=" + y);
}

判断是否是IE浏览器

访问历史

history.go(index)函数,在浏览器历史记录中跳转,正数为前跳,负数为后跳
history.back()函数,后跳;
history.forward()函数,前跳;
history.length属性,获得历史记录的长度;

浏览器相关信息

navigator对象用于获得浏览器相关信息;使用console.dir(navigator)查看成员信息。

属性名称 --------------------------- 说明
appCodeName ---------------------------- 产品名称
appName ----------------- 应用名称
appVersion ----------------------- 版本号
cookieEnabled --------------- 是否允许使用cookie
language -------------------- 语言
oscpu ----------------- 操作系统名称
platform ------------------- 操作系统平台
product ------------------------ 产品代号或名称,比如Gecko
productSub ------------ 产品发布日期20100701
userAgent ------------- 客户端详细信息,比如:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.1

判断操作系统:

var isWin = (navigator.platform == “Win32”) || (navigator.platform == “Windows”);
var isMac = (navigator.platform == “Mac68K”) || (navigator.platform == “MacPPC”)
|| (navigator.platform == “Macintosh”);

var isUnix = (navigator.platform == “X11”) && !isWin && !isMac;

访问页面URL

window对象的location属性,保护了该窗口所装载文档的地址:location包含的常用属性:
1.hostname:文档所在地址的主机名
2.href:文档所在地址的URL地址
3.host:文档所在地址的主机地址
4.port:文档所在地址的服务端端口
5.pathname:文档所在地址的文件地址
6.protocol:装载该文档使用的协议

var loc = window.location;
for(var name in loc){
    console.debug(name,loc[name]);
}

定时器

setTimeout(fn,time)函数,返回timer,用于指定一段时间后执行某函数
setInterval(fn,time)函数,返回timer,用于周期性执行某函数;
   参数fn可以是字符串组成的jascript代码,也可以是一个函数名称;
   参数time表示时间,毫秒为单位;
clearTimeout(timer)函数,清除由setTimeout创建的定时器;
clearInterval(timer)函数,清除由setInterval指定的定时器;

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注