JS中的浏览器对象

JS中的浏览器对象

作为一种脚本语言,JavaScript 代码不能独立运行,通常情况下我们需要借助浏览器来运行 JavaScript 代码,所有 Web 浏览器都支持 JavaScript。

除了可以在浏览器中执行外,也可以在服务端或者搭载了 JavaScript 引擎的设备中执行 JavaScript 代码,浏览器之所以能够运行 JavaScript 代码就是因为浏览器中都嵌入了 JavaScript 引擎,常见的 JavaScript 引擎有:

V8:Chrome 和 Opera 中的 JavaScript 引擎;

SpiderMonkey:Firefox 中的 JavaScript 引擎;

Chakra:IE 中的 JavaScript 引擎;

ChakraCore:Microsoft Edge 中的 JavaScript 引擎;

SquirrelFish:Safari 中的 JavaScript 引擎。

BOM

BOM(Browser Object Model)是浏览器对象模型的缩写。按照面向对象的编程思想,将浏览器抽象为几大对象,包括window、navigator、 location、screen、history、document。

window

window对象是一个全局对象,navigator、location、location、screen、history、document都是windows的成员对象。同时,window也表示浏览器窗口。

window.alert("欢迎访问"); //提示框

window.confirm("您是否确定?"); //询问框

window.prompt("请输入"); //输入框

window.setInterval(1000); //设定时间间隔,时间单位:毫秒

window.clearInterval(); //清除时间间隔

window.setTimeout(1000); //倒计时多少时间以后执行函数,时间单位:毫秒

window.open(); //打开窗体

window.close(); //关闭窗体

window.innerHeight; //浏览器窗体的内高

window.innerWidth;//浏览器窗体的内宽

window.outerHeight;//浏览器窗体的外高

window.outerWidth; //浏览器窗体的外宽

navigator

navigator对象表示浏览器的信息,最常用的属性包括:

navigator.appName:浏览器名称;

navigator.appVersion:浏览器版本;

navigator.language:浏览器设置的语言;

navigator.platform:操作系统类型;

navigator.userAgent:浏览器设定的User-Agent字符串。

console.log('appName = ' + navigator.appName);

console.log('appVersion = ' + navigator.appVersion);

console.log('language = ' + navigator.language);

console.log('platform = ' + navigator.platform);

console.log('userAgent = ' + navigator.userAgent);

screen

屏幕对象

screen.height:屏幕高度

screen.width:屏幕宽度

screen.colorDepth:颜色位数

console.log(screen.height)

console.log(screen.width);

console.log(screen.colorDepth);

location

location对象代表一个网页的地址信息

location.href:网页地址

location.protocol:访问协议

location.host:访问主机

location.port:访问端口号

location.pathname:访问路径

location.search:查询参数

location.hash:hash

location.href = www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol; // 'http'

location.host; // 'www.example.com'

location.port; // '8080'

location.pathname; // '/path/index.html'

location.search; // '?a=1&b=2'

location.hash; // 'TOP'

history

history对象保存了浏览器的历史记录。对于现代Web页面来说,由于大量使用AJAX和页面交互,使用history是不可取的。

history.back():后退

history.forward():前进

history.go():前进或后退几次

//history对象

history.back(); //前进

history.forward();//后退

history.go(-1);//后退一次

document

document对象代表一个页面,由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点。

document常见属性:

document.title:文档标题,与HTML中的title标签等价

document.bgColor:页面背景颜色

document.fgColor:页面前景色

document.fileCreateDate:文件建立日期,只读属性

document.fileModifiedDate:文件修改日期,只读属性

document.URL:可返回当前文档的URL

document.linkColor:未点击过的链接颜色

doucment.alinkColor:鼠标在此链接上的颜色

document.vlinkColor:已点击过的链接颜色

document.charset:设置字符集,简体中文为gb2312

document.fileSize:文件大小,只读属性

document.cookies:设置和读出cookie

document常见方法:

document.createElement(tag):创建HTML元素

document.getElementById(id):获得指定id值的对象

document.getElementByName(name):获得name值的对象

document.write():动态向页面写内容

document.body.appendChild(ele):向节点添加最后一个子节点

document常用事件:

document.body.onclick="func()":鼠标指针单击页面时触发

document.body.onmouseover="func()":鼠标指针移到页面时触发

document.body.onmouseout="func()": //鼠标指针移出页面时触发

document对象应用详细介绍,请看后面章节。

文章同时发表在:码农编程网 欢迎访问

本节重点:

浏览器介绍;

什么是BOM,BOM常见对象介绍;

DOM对象介绍。

相关推荐

阔别30年等待 《圣斗士星矢:重生》今日重燃上线
浅谈互联网基金的选择 #雪球ETF星推官# #互联网主题基金的投资机会# 互联网公司轻资产、高成长、强壁垒,增长很快,很多投资者都很关注互联网...
添字的意思和解释
365bet官方投注网站

添字的意思和解释

📅 08-12 👁️ 6607