文档章节

JS-BOM和DOM简介

人间四月
 人间四月
发布于 2015/12/07 21:39
字数 984
阅读 33
收藏 0

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():“后退”




© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 2
博文 74
码字总数 30455
作品 0
朝阳
程序员
第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt
06/05
0
0
JavaScript 学习(2)

参考: http://www.w3cschool.cc/js/js-window.html 四、浏览器 BOM 浏览器对象模型(BOM)使JavaScript有能力与浏览器“对话”。 (1)Window 浏览器对象模型(Browser Object Model),尚无...

明天以后
2014/10/01
0
0
Javascript---Javascript简介

javascript 是一门面向对象的动态语言。虽然在字面中带有java的字样但是千万不能和java混淆。 javascript的主要运用在web开发中,做交互方面的开发让交互变得更加的有意思和人性化。 ————...

不起眼的过路Sir
2014/09/26
0
0
第一章 JavaScript简介《JavaScript高级程序设计》

本系列文章是《JavaScript高级程序设计》(第二版) 中文 的缩水版,希望通过对书籍内容的转述,一方面能加深自己对于JavaScript的理解,另一方面也能让其他人学习了解JavaScript这门语言。如有...

walala_Lee
2013/07/04
0
3
JavaScript的各种对象

当人们谈论JavaScript的时候,往往并不严谨。因为在一个面向对象的语言中,你总是喜欢这么说:“一切都是对象”。难道真的什么都是“对象”吗?下面来说说我的看法。 通常我们谈论的JavaScr...

梵高
2011/08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

arts-week10

Algorithm 905. Sort Array By Parity - LeetCode Review Who’s Afraid of the Big Bad Preloader? 一文读懂前端缓存 一个网络请求3个步骤:请求,处理,响应,而前端缓存主要在请求处响应这两步...

yysue
今天
0
0
00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
5
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
126
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部