一起来学习JavaScript的BOM操作

window对象

BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。

全局作用域

由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。来看下面的例子。

一起来学习JavaScript的BOM操作_第1张图片

我们在全局作用域中定义了一个变量name和一个函数sayName(),它们被自动归在了window对象名下。于是,可以通过window.name访问变量name,可以通过window.sayAge()访问函数sayName()。由于sayName()存在于全局作用域中,因此this.name被映射到window.name,最终显示的仍然是正确的结果。

常见事件

window对象也有一些自己的事件,这里我们用



  
    
    
    
    Document
    
  
  
    
  

调节窗口大小

比如下面这个案例,当我们把网页缩放到800的时候盒子就会消失不见。



  
    
    
    
    Document
    
  
  
    
    

定时器setTimeout



  
    
    
    
    Document
  
  
    
  

this指向问题



  
    
    
    
    Document
  
  
    
    
  

location对象

转跳页面




    
    
    
    Document


    
    

location常见方法



  
    
    
    
    Document
  
  
    
    
  

总结

浏览器对象模型(BOM)以window对象为依托,表示浏览器窗口以及页面可见区域。同时,window对象还是ECMAScript中的Global对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。

  • 在使用框架时,每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中,可以通过位置或通过名称来访问。
  • 有一些窗口指针,可以用来引用其他框架,包括父框架。
  • top对象始终指向最外围的框架,也就是整个浏览器窗口。
  • parent对象表示包含当前框架的框架,而self对象则回指window。
  • 使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性,可以逐段或整体性地修改浏览器的URL。
  • 调用replace()方法可以导航到一个新URL,同时该URL会替换浏览器历史记录中当前显示的页面。架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中,可以通过位置或通过名称来访问。
  • 有一些窗口指针,可以用来引用其他框架,包括父框架。

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!   

你可能感兴趣的:(一起来学习JavaScript的BOM操作)