首页 > 代码库 > javascript BOM基本知识

javascript BOM基本知识

1.BOM(Bowser Object Model浏览器对象模型)

  浏览器创建的对象通常称作文档(Document)对象,它是浏览器使用的众多对象的一部分,浏览器操作的对象结合起来称作浏览器对象模型(Bowser Object Mode),简称BOM

2.window 对象是顶层对象,它包含了有关文档的窗口信息

2.1 document对象

  • document对象集合
    • anchors[]      //锚地对象数组
    • images[]       //图片对象数组
    • links[]           //连接对象数组
    • form[]           // 表单对象数组
  • document对象属性
    • cookie           //设置或返回当前文档有关的所有cookie
    • domain         //返回当前文档的域名,用于安全目的,字符串类型
    • referrer         //返回载入当前文档的URL
    • title              // 返回当前文档的标题
    • URL             //返回当前文档的URL
    • bgColor        //设置文档的背景颜色
    • fgColor         //设置文档的前景颜色
    • linkColor       //设置未访问连接颜色
    • vlinkColor     //设置已访问连接颜色
  • document对象方法
    • open()          //打开一个新的文档,并擦除旧文档内容
    • close()          //关闭open()打开的文档输出流
    • write()          //向当前文档插入字符串或在open()打开文档末尾添加字符串
    • writeln()        //与write()相同,只是在输出字符串末尾添加回车换行字符串

2.2 screen对象(显示器对象)

  • screen对象属性
    • availHeight   // 屏幕可用高度,单位:px
    • availWidth   //屏幕可用宽度 
    • height         //屏幕高度 
    • width          // 屏幕宽度 
    • colorDepth  //颜色深度,使用像素位数表示

 

2.3 location对象(位置对象)

  • location对象属性
    • hash                //设置或返回从#开始的URL
    • host                //设置或返回主机名和当前URL端口号
    • hostname        //设置或返回当前URL的主机名
    • href                //设置或返回完整的URL
    • pathname        //设置或返回当前URL的路径部分
    • Port                //设置或返回当前URL的端口部分
    • protocol          //设置或返回当前URL的协议
    • search            //设置或返回从?开始的URL
  • location对象的方法
    • reload(force)   //重新加载当前页面,参数force是可选参数,其值为true时,强制完成加载
    • replace(url)     //使用指定URL替换当前页面,但不在浏览器历史中产生新的登记项,这是该方法与为href属性赋值的不同之处
    • assign(URL)    // 加载新的文档

2.4 history对象(历史对象)

  • history对象方法
    • back()            // 返回到用户刚访问过的页面
    • forward()       // 返回下一个页面
    • go(n)            //  跳转到相对于当前页面的第n个URL表示的页面,正值表示前进,负值表示后退。go(-1)等价于back()

2.5 窗口控制

  • moveBy(dx,dy)                   //将窗口从当前位置移动指定的距离
  • moveTo(x,y)                      //将当前窗口移动到指定位置
  • resizeBy(dw,dh)                 // 将窗口缩放指定的量
  • resizeTo(width,height)        //将窗口大小修改为指定的宽度和高度
  • scrollBy(dx,dy)                   //将窗口内容滚动指定的量
  • scrollTo(x,y)                      //将窗口内容滚动到指定位置

2.6 焦点控制

  • focus   //得到焦点
  • blur     //移除焦点

2.7 打开和关闭窗口

  • 打开窗口
    • 语法:open("URL","窗口名称","窗口风格")
    • 功能:打开一个行的窗口,并在窗口中载入指定URL地址的页面
    • 窗口风格:height(窗口高度) 、width(窗口宽度)、left(窗口左坐标)、top(窗口上坐标)、location(yes |no)是否显示地址栏、menubar(yes |  no) 是否显示菜单栏、resizable(yes |  no) 是否可以改变窗口大小、scrollbars(yes  |no)  是否允许出现滚动条、status(yes  |no)  是否允许显示状态栏、toolbar(yes |no)是   否显示工具栏
  • 关闭窗口
    • close()
    • 功能:自动关闭窗口

2.8 定时器

  • setTimeout(执行代码,毫秒数)               //到了指定的毫秒数,自动执行功能代码
  • clearTimeout(定时器)                           //取消由setTimeout()设置的定时器
  • setInterval(重复执行代码,毫秒数)          //按指定周期重复执行功能代码
  • clearInterval(时间间隔器)                      // 取消由setInterval()设置的时间间隔器

2.9 对话框 

  • alert("提示字符串")                         //弹出一个警告框,在警告框中显示提示字符
  • confirm("提示字符串")                     // 弹出一个确认框,在确认框中显示提示字符,当用户点击”确认“按钮时返回true,点击”取消“时返回false
  • prompt("提示字符串","缺省文本")     //弹出一个输入框,在输入框中显示提示字符串,在输入文本框中显示缺省文本,并等待用户输入,当用户点击"确定"返回用                                                        户输入字符串,点击"取消",返回null

2.10 属性

  • 状态栏
    • defaultStatus               //改变浏览器状态栏默认显示
    • status                         //临时改变浏览器状态栏显示
  • 窗口位置
    • IE浏览器  
      • scrollLeft  |  scrollTop                                                                                               //窗口左上角X坐标,Y坐标
      • document.documentELement.scrollLeft/scrollTop  或document.body.scrollLeft/scrollTop   //当前文档向右、向下滚动的像素
    • Firefox浏览器
      • innerHeight  |    innerWidth          //返回窗口的文档显示区的高度和宽度(不包括菜单栏、工具条、滚动条)  单位:px
      • outHeight    |     outWidth           //返回窗口总的高度和宽度(包括菜单栏、工具条、滚动条)  单位:px
    • !IE浏览器
      • screenX   |    screenY           //窗口左上角X坐标、Y坐标
      • pageXoffset  |pageYoffset    //当前文档向右、向下滚动的像素
  • 其他属性
    • name       //设置或返回窗口名称
    • self          // 返回对当前窗口的引用
    • closed      // 当窗口关闭时返回true
    • opener 

2.11 navigator对象(导航器对象)

  • navigator对象属性
    • appCodeName       //返回浏览器的代码名
    • appNode               //返回浏览器名称
    • appVersion           //返回浏览器平台和版本信息
    • cookieEnabled       //返回浏览器中是否启用cookie的布尔值,打开时,其值为true,否则为false
    • platform               //返回浏览器运行的操作系统平台
    • userAgent            //返回浏览器在HTTP请求中使用的用户代理首部的值
  • navigator对象方法
    • javaEnabled()        //如果浏览器支持java,并打开了对java的支持则返回true,否则返回false

javascript BOM基本知识