文档章节

JS-BOM和DOM简介

人间四月
 人间四月
发布于 2015/12/07 21:39
字数 984
阅读 37
收藏 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():“后退”




© 著作权归作者所有

共有 人打赏支持
上一篇: DOM
下一篇: python 操作xls
人间四月
粉丝 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

没有更多内容

加载失败,请刷新页面

加载更多

springboot中filter的用法

一、在spring的应用中我们存在两种过滤的用法,一种是拦截器、另外一种当然是过滤器。我们这里介绍过滤器在springboot的用法,在springmvc中的用法基本上一样,只是配置上面有点区别。 二、f...

xiaomin0322
12分钟前
3
0
java项目修改了更换了jdk版本报错进行修改

java项目原来用的是1.8版本的,改成1.7版本后,项目会报错,要进行的修改是 然后是clean一下项目,然后是选中项目的buildpath,然后是configurebuildpath,然后是看jdk是否进行修改...

myAll_myAll
23分钟前
3
0
Gartner 2018 数据库系列报告发布 巨杉数据库连续两年入选

近期,Gartner陆续发布了2018年的数据库系列报告,包括《数据库魔力象限》《数据库核心能力》以及《数据库推荐报告》。其中,SequoiaDB巨杉数据库作为业界领先的金融级分布式交易型数据库产品...

巨杉数据库
26分钟前
0
0
Navicat闲置一段时间卡死问题的解决

先关闭连接,再右键点击所需要设置的链接,进入编辑连接,进入高级项,勾选保持连续间隔(秒):时间设置短一些,比如30秒,完成!!

joyStalker
26分钟前
0
0
理解Java中的弱引用(Weak Reference)

1. What——什么是弱引用? Java中的弱引用具体指的是java.lang.ref.WeakReference<T>类,我们首先来看一下官方文档对它做的说明: 弱引用对象的存在不会阻止它所指向的对象变被垃圾回收器回...

绝地逢生
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部