《JS原理、方法与实践》- window对象

简介: 《JS原理、方法与实践》- window对象

BOM是Browser Object Mode的缩写,表示浏览器对象模型。ES是一种语言,跟具体环境没关系。DOM的作用是将文档转换为相应的对象,它跟具体环境也没有关系。而DOM则是一种将浏览器这个具体的环境对应为一种对象的模型,它提供了ES跟浏览器之间进行交互的桥梁。

因为DOM没有自己的标准,所以不同浏览器的实现细节并不相同,但是它们还是有很多统一的地方。

虽然BOM没有自己的标准,但是HTML5标准中对BOM中的对象都做了相应的规定。如果浏览器实现HTML5标准,那么BOM的结构也就有望趋向统一,这会使前端开发中令人无奈的浏览器兼容性问题得到一定改善。

window对象是浏览器中的顶层对象,其他所有的对象都直接或间接包含它下面,但是,通过window对象只能直接操作它自己直接包含的属性对象,而无法操作更深层次的对象。

###### window 对象的属性大致可以分为以下六大部分

> * 窗口、框架相关属性  

> * 窗口操作相关属性

> * 弹出窗口相关属性

> * 浏览器对象相关属性

> * 定时器相关属性

> * 其他属性

#### 1. 窗口、框架相关属性

window对象中跟窗口、框架相关的属性有:window、self、frames、length、top、parent和frameElement 7个属性。

* 其中,前三个(window、self、frames)都是指向window对象自身,它们所代表的内容完全相同,知识所使用的场景不同。

* widow中的length属性指页面中所包含的框架数量

* top属性表示最顶层框架

* parent表示上层框架,对于本来就是最顶层的window对象来说,top和parent属性就是自身

* frameElement属性是框架窗口中用来获取(iframe)框架节点自身用的。

###### 1.1 frameElement

frameElement属性是HTMLIFrameElement类型,这是在DOM的HTML子标准中定义的类型,它一共有10个可读写属性,每个均对应一个iframe标签的属性,另外还有一个只读属性(contentDocument:获取框架所包含的document对象)。

10个可读写属性如下:

* align: 排列方式,可以取left、right、top、middle、bottom等值,最好使用样式来设定,而不要使用align值

* frameBorder: 框架的边框

* src: 框架显示文档的地址

* height: 框架的高度

* width: 框架的宽度

* longDesc: 长描述,可以指定一个URL来存放iframe的描述信息

* marginHeight:框架的上、下边距

* marginWidth: 框架的左、右边距

* name: 框架的名称

* scrolling: 是否显示框架的滚动条

#### 2. 窗口操作相关属性

* open(url, target, features, replace): 打开窗口

* close(): 关闭窗口

* stop(): 停止加载

* focus(): 获取焦点

* blur(): 释放焦点

#### 3. 弹出窗口相关属性

* alert(message): 提示窗口

* confirm(message): 确认窗口给

* prompt(message, defaule): 输入窗口

* print(): 打印窗口

#### 4. 浏览器对象相关属性

* document: 文档对象

* location: 位置对象

* history: 历史记录对象

* navigator: 存储浏览器信息

* applicationCache: 应用缓存对象

* locationbar: 地址栏对象

* menubar: 菜单栏对象

* personalbar: 个人栏对象

* scrollbars:滚动条对象

* statusbar: 状态栏对象

* toolbar: 工具栏对象

#### 5. 定时器相关属性

* setTimeout(func, delay): 设置倒计时操作

* clearTimeout(timeoutID): 清除倒计时设置

* setInterval(func, delay): 设置定时操作

* clearInterval(intervalID): 清除定时设置

#### 6. 其他属性

window对象除了上述属性外,还包含其他一些属性,这些属性主要包括三大类:ES中的全局属性、自定义属性(包括自定义的全局变量)和不同浏览器特有的属性。

因为window对象同时还是ES中的Global对象,所以它还会包含ES中的全局属性。例如,NaN、undefined,以及Function、String、Array等所有的内置性对象。

目录
相关文章
|
2月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
146 52
|
24天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
2月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
28 1
JavaScript中对象的数据拷贝
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
55 5
|
2月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
2月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
2月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
84 1
|
2月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。