JavaScript之BOM的基本使用

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对象中API:
alert(‘信息’)：消息框
//alert(“你好1”);
prompt(‘提示信息’,默认值)：标准输入框
//var inputText = prompt(“请输入你的名字”,“孙悟空”);
confirm( ) ：确认框
//var ret = confirm(“亲,你确定删除吗?”);

window.open()方法：打开一个新窗口
调用示例：
window.open(“http://www.520it.com/”, “_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:从IE9开始也逐渐开始支持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浏览器:
if(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:wend所在地址的主机地址
4.port:文档所在地址的服务端端口
5.pathname:文档所在地址的文件地址
6.protocol:装载该文档使用的协议
reload() 重新加载当前浏览器地址的文档。
var loc = window.location;
for(var name in loc){
console.debug(name,loc[name]);
}

一些简单使用

function deleteConfirm() {
    弹出框
    var ret =  confirm("确定要删除吗?");
    if(ret){
        alert("删除成功");
    }
}
//重新加载当前资源
function reload() {
    window.location.reload();
}
//跳转到指定的资源
function redirects() {
    window.location.href="https://www.baidu.com";
}

范亚明

发布了52 篇原创文章 · 获赞 2 · 访问量 239

私信关注

JavaScript之BOM的基本使用

猜你喜欢