JS-BOM和DOM简介
JS-BOM和DOM简介
人间四月 发表于2年前
JS-BOM和DOM简介
  • 发表于 2年前
  • 阅读 27
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: JS-window-对象属性 BOM和DOM简介

BOM和DOM简介

    BOM,Browser Object Model,浏览器对象模型。

    BOM主要提供了访问和操作浏览器各组件的方式。

    浏览器组件:
  •     window:浏览器窗口

  •     lacation:地址栏

  •     history:浏览历史

  •     screen:显示器屏幕

  •     navigator:浏览器软件

  •     document:网页本身


    DOM,Document Object Model,文档对象模型。

    DOM主要提供了访问和操作HTML标记的方式。

    HTML标记:图片标记,表格标记,表格标记,Body,html标记…… 


BOM和DOM不是JS的内容,是W3C指定的一种规范。

W3C是制定互联网的一个国际化的组织,比如:XHTML,CSS,JS

BOM和DOM在浏览器中医对象的形式来实现。

    BOM对象结构图:

    略。

各对象之间是有层级关系的,访问:

    window.document.write("OK")

    window.document.body.bgColor = "#000000"

window对象是其他所有对象的最顶层对象,可以省略不写。

    document..write("OK")

    document.body.bgColor = "#999999"

    window.alert("OK")     ->    alert("OK")

    ......


  •  window对象属性:
    • name:浏览器窗口的名字或者框架的名字,给<a>标记的target属性使用

      • 可以设置窗口名称,window.name= “newwin”

    • top:代表最顶层窗口    window.top

    • parent:代表父  级窗口,主要用于框架

    • self:代表当前窗口,主要用于框架

    • innerWidth:指浏览器窗口的内宽(不包含菜单栏、工具栏、地址栏、状态栏)FireFox支持,IE不支持

      • IE,使用document.documentElement.clientWidth来代替

      • Document.documentElement是<html>标记对象

      • document.body    是<body>标记对象

    • innerHeigh:指浏览器窗口的内高


  •  window对象方法:
    • alert():弹出一个警告对话框

    • prompt():弹出一个输入对话框

    • confirm():弹出一个确认对话框

    • open():打开一个新的浏览器窗口

      • var winObj = window.open(url,name,options);

        url:准备在新窗口中显示的文件,url可以是空字符串,表示限是一个空的页面

        name:新窗口的名字,该名字给<a>标记的target属性来使用

        oprions:窗口的规格

          • width、height、left(左边距)、top(上边距)、menuber(是否显示菜单栏)、toolbar(工具栏)、status(状态栏)、location(是否显示状态栏)

          返回值:返回一个window对象的变量,通过该名称跟踪窗口,winObj具备window对象的所有属性和方法。

    • close():关闭窗口

    • print():打印窗口

    • setTimeout():延时器方法

      • 设置一个延时器

      • var timer = window.setTimeout(code,millisec)

      • code:合法的js代码    window.setTimeout("close()",1000)    函数发那个在引号中

         window.setTimeout(close,1000)//传递函数地址,不加(),若加上()是将函数的执行结果传入,不合法

      • 返回值:返回一个延时器的id变量,id用来给clearTimeout()来清除

    • clearTimeout():

      • 功能:清楚延时器id变量

      • 语法:window.clearTimeout(timer)

      • 参数:timer就是延时器对象设置的id

    • setInterval:定时器方法

      • 设置一个定时器。定时器,重复不断的执行IS代码(周期性)

      • var timer = window.setInterval("close()",1000)

    • clearInterval


BOM其他对象:
  • screen屏幕对象:

    •     width:屏幕的宽度

    •     height:高

    •     availWidth:屏幕的有效宽度,不含任务栏

    •     avaiHeight:

  • navigator对象:

    • appName:浏览器软件的名称,主要用来判断客户使用的是什么核心的浏览器。

      • IE,返回值为Microsoft Internet Explorter

      • FireFox,返回值为Netscape 

    • appversion:浏览器软件的核心版本号

    • systemLanguage:系统语言

    • userLanguage:用户语言

    • platform:平台

  • Location对象

    • href:获取地址栏中完整的地址,可是实现JS的网页跳转,Location.href="http://www.sina.com.cn";

    • host:主机名

    • hostname:主机名

    • pathname:文件路径及文件名

    • search:查询字符串    地址栏?之后部分

    • protocol:协议

    • hash:锚点名称

    • reload([true]):刷新网页,true表示强制刷新

    • 注意:所有的属性,重新赋值后,网页将自动刷新

  • history对象

    • lengh:历史记录的个数

    • go(n):同时实现“前进”“后退”

      • history.go(0)刷新

      • history.go(-1)后退

      • history.go(1)前进一步

      • history.go(2)前进2步

    • forward():相当于浏览器的“前进”按钮

    • back():“后退”




标签: BOM DOM window
共有 人打赏支持
粉丝 3
博文 70
码字总数 30455
×
人间四月
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: