文档章节

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
2018/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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
8
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
3
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部