JavaScript中的两大护法(一)

编程语言 来源:紫荆峰 22℃ 0评论

0.前言

  最近学习了JavaScript中的BOM和DOM,感觉就像两大护法,为JavaScript保驾护航,今天就来分享一下这二者之一———BOM

1.BOM简介


BOM.png

  BOM:浏览器对象模型(Browser Object Model),是操作浏览器和屏幕的对象集合。通过window全局对象来使用它们。
  此时可以发现,我们过去定义的变量其实就是给window这个全局对象添加的属性;过去声明的函数其实就是给window这个全局对象添加的方法。
  通过上面的结构图可以发现window下面有很多属性,对象。尤其是在第二行:

  • window.document:表示的是当前的文档(页面),他的属性和方法属于DOM范围,我们下节分享。
  • window.frames:表示当前页面所用的所有框架的集合
  • window.navigator:它是用来描述浏览器及其功能的对象。
  • window.screen:它是用来描述浏览器以外的环境,例如屏幕的宽高,分辨率之类的。
  • window.location:是对浏览器页面进行的操作。如刷新、加载之类的。
  • window.history:是对浏览器访问的历史记录,足迹之类进行的操作。
      上面的这是六种方法中,今天着重说两个:loactionhistory

    2.正文

      这样干说没意思,我们以案例说话。

    
    
    
      
         
      BOM简介
    
    
    

    首先搭好界面,第一部分:
    window.location
    在代码中的javascript中添加下面下面代码:

    console.log(window.location.href);
    
          function wh() {
              alert("瞅你咋地");
              window.location.href = "";
          }
          function refresh() {
    
              window.location.reload();
          }
          function ass() {
    
              // window.location.assign("red.html");
              window.location.replace("red.html");
          }

    这段代码用了几个location方法:
    (1)href:表示的是当前页面所在的本地地址在浏览器上显示出来了。
    (2)reload():表示的是刷新界面;
    (3)reload(true):也表示的是刷新界面,但是刷新的界面,不会被缓存。
    (4)assign():加载接的界面,可以返回上一页。
    (5)replace():也是加载新的界面,但是不会在历史记录中留下痕迹,就是说返回不了上一页。
    注意:更改location中的href和调用assgin()会清空历史记录

第二部分:window.history

function goBack(){
            window.history.back();
        }
        function goForward(){
            window.history.forward();
        }

        function goPage() {
            window.history.go(2);
        }

(1)length:表示浏览记录的个数
(2)back():上一页
(3)forward():下一页
(4)go(num):直接跳到指定的历史记录,如果num小于0会跳到当前界面之前的num的绝对值个记录。如果num大于0,会跳到当前界面之后的num值记录。
注意:如果想用go(num)进行页面的跳转,必须在浏览器中有历史记录,否则是跳转不到指定的界面的


3.以上是对BOM进行简单的总结以及常用的一些方法,希望对大家有所帮助,谢谢!!!!!!!