第五章 BOM和DOM基础
01.BOM
BOM即浏览器对象模型,其核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。所有浏览器都支持该对象,浏览器对象模型如图所示
在浏览器里一般调用window下的子模块不需要写出window,如window.document
等价于document
,一般常用document
对象,即文档对象模型(Document Object Model)。
window常用子对象
1)history对象
该对象表示当前窗口的浏览历史,使用方法为window.history.[属性|方法]
,history对象常用方如表:
方法 | 意义 |
---|---|
back() | 显示浏览器的历史列表中后退一个网址的网页 |
forward() | 显示浏览器的历史列表中前进一个网址的网页 |
go(n)/go(url) | 显示浏览器的历史列表中第n个网址的网页,n>0表示前进,反之,n<0表示后退或显示浏览器的历史列表中对应的url网页 |
**注意:**从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。
2)location对象
location用于获取或设置窗体的URL,并且可以用于解析URL。使用方法也是location.[属性|方法]
,location对象包括的属性与方法如表:
属性与方法 | 意义 |
---|---|
href | 整个url字串 |
protocol | url中从开始至冒号(包括冒号)表示通信协议的字串 |
hostname | URL中服务器名、域名、子域名或IP地址 |
port | url中端口名 |
host | url中hostname和port部分 |
pathname | url中文件名或路径名 |
hash | url中由#开始的锚点名称 |
search | url中从问好开始至结束的表示变量的字串 |
reload([是否从服务器端刷新]) | 刷新当前网页,其中“是否从服务器端刷新”的值是true或false |
replace(url) | 用url网址刷新当前的网页 |
3)navigator对象
Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。navigator对象常用属性如表:
appCodeName 浏览器代码名的字符串表示
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent头部值
属性 | 描述 |
---|---|
appCodeName | 浏览器代码名的字符串表示 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
platform | 返回运行浏览器的操作系统平台 |
userAgen | 返回由客户机发送服务器的user-agent头部值 |
4)screen对象
screen对象用于获取用户的屏幕信息。使用方法为window.screen.属性
,screen对象常用属性如表。
属性 | 描述 |
---|---|
availHeight | 窗口可以使用的屏幕高度,单位像素 |
availWidth | 窗口可以使用的屏幕宽度,单位像素 |
colorDepth | 用户浏览器表示的颜色位数,通常为32位(每像素位的位数) |
pixelDepth | 用户浏览器表示的颜色位数,,通常为32位(每像素位的位数)(IE不支持此属性) |
height | 屏幕的高度,单位像素 |
width | 屏幕的宽度,单位像素 |
02.DOM
如上所说,DOM即文档对象模型”(Document Object Model),是window的子对象,也是JavaScript操作网页的接口,特别常用则单独拎出。写了半天感觉写不好,可以参考博客《DOM》,比较专业讲解。
最后附window和DOM的思维导图
window思维导图
DOM思维导图
后续持续更新……
原创不易,如果觉得不错,就点个赞吧!