JavaScript Window - 浏览器对象模型

简介: JavaScript Window - 浏览器对象模型

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM)

BOM:Browser Object Model 是浏览器对象模型,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象也是核心对象,其他对象都是该对象的子对象。

BOM对象包含
(1)window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性。

(2)document 对象,文档对象;

(3)location 对象,浏览器当前URL信息;

(4)navigator 对象,浏览器本身信息;

(5)screen 对象,客户端屏幕信息;

(6)history 对象,浏览器访问历史信息;

在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

在这里插入图片描述

BOM和DOM的关系

(1)DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容

(2)BOM通过 window 对象来访问、控制、修改浏览器中的内容

联系:BOM包含DOM。
区别:DOM描述了处理网页内容的方法和接口,即操作页面内部

BOM描述了与浏览器进行交互的方法和接口,即操作页面之间

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
    对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight

  • document.documentElement.clientWidth
    或者

  • document.body.clientHeight

  • document.body.clientWidth
    实用的 JavaScript 方案(涵盖所有浏览器,包含 IE8 及以下版本的浏览器):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

window.navigator对象

window.navigator对象包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用。(这个对象和event一样是一个全局变量,并且是唯一的)

navigator.appCodeName //浏览器代码名的字符串表示

navigator.appName //官方浏览器名的字符串表示

navigator.appVersion //浏览器版本信息的字符串表示

navigator.userAgent //返回和浏览器内核相关的信息

navigator.cookieEnabled //如果启用cookie返回true,否则返回false

navigator.javaEnabled() //如果启用java返回true,否则返回false

navigator.platform //浏览器所在计算机平台的字符串表示

navigator.plugins //安装在浏览器中的插件数组

ps:如果window.navigator.userAgent出现了Mobile,可以确定用户使用的是移动设备。

在这里插入图片描述

Location 对象

location.hostname 返回 web 主机的域名

  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 (80 或 443)
  • location.protocol 返回所使用的 web 协议(http: 或 https:)

在这里插入图片描述

相关文章
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1068 14
|
8月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
259 23
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
1415 62
|
Web App开发 JavaScript 前端开发
深入理解Node.js事件循环和异步编程模型
【10月更文挑战第9天】在JavaScript和Node.js中,事件循环和异步编程是实现高性能并发处理的基石。本文通过浅显易懂的语言和实际代码示例,带你一探究竟,了解事件循环的工作原理及其对Node.js异步编程的影响。从基础概念到实际应用,我们将一步步解锁Node.js背后的魔法,让你的后端开发技能更上一层楼!
|
JavaScript 前端开发
JavaScript Window Screen
JavaScript Window Screen
107 3
|
JavaScript 前端开发
JavaScript Window Navigator
JavaScript Window Navigator
105 2
|
JavaScript 前端开发
JavaScript Window Location
JavaScript Window Location
117 2
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
172 2
|
JavaScript 前端开发
JavaScript Window History
JavaScript Window History
81 1
|
JavaScript 前端开发
深入理解Node.js中的异步编程模型
【10月更文挑战第39天】在Node.js的世界里,异步编程是核心所在,它如同自然界的水流,悄无声息却又无处不在。本文将带你探索Node.js中异步编程的概念、实践以及如何优雅地处理它,让你的代码像大自然的流水一样顺畅和高效。