文档章节

JS-BOM和DOM简介

人间四月
 人间四月
发布于 2015/12/07 21:39
字数 984
阅读 33
收藏 0
点赞 0
评论 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
从零开始学 Web 之 JavaScript(一)JavaScript概述

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间...

fengdaoting
06/03
0
0
由浅入深JavaScript——JavaScript的诞生背景

JavaScript的诞生背景 在上世纪90年代,欧美各国的web程序日益流行,但是当时用户上网还都在使用电话拨号上网,通过 调制解调器,网速仅仅只有28kb/s。而web程序的展现却日渐丰富。当时在没有...

奇葩界张三
06/29
0
0
JavaScript基础(一)概述

JavaScript 概述 JS作用 验证表单(以前的网速慢) 页面特效(PC端的网页效果) 移动端(移动web和app) 异步和服务器交互(AJAX) 服务端开发(nodejs) 语言类型 js是一种脚本语言,不仅是...

fengdaoting
05/03
0
0
day03_js学习笔记_03_js的事件、js的BOM、js的DOM

day03js学习笔记03_js的事件、js的BOM、js的DOM ============================================================================= 涉及到的知识点有: ==================================......

黑泽明军
04/19
0
0
JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd
05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java基础——异常

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 异常处理: 可以挖很多个陷阱,但是不要都是一样...

凯哥学堂
25分钟前
0
0
180723-Quick-Task 动态脚本支持框架之结构设计篇

文章链接:https://liuyueyi.github.io/hexblog/2018/07/23/180723-Quick-Task-动态脚本支持框架之结构设计篇/ Quick-Task 动态脚本支持框架之结构设计篇 相关博文: 180702-QuickTask动态脚本...

小灰灰Blog
28分钟前
0
0
SBT 常用开发技巧

SBT 一直以来都是 Scala 开发者不可言说的痛,最主要的原因就是官方文档维护质量较差,没有经过系统的、循序渐进式的整理,导致初学者入门门槛较高。虽然也有其它构建工具可以选择(例如 Mill...

joymufeng
33分钟前
0
0
HBase in Practice - 性能、监控及问题解决

李钰(社区ID:Yu Li),阿里巴巴计算平台事业部高级技术专家,HBase开源社区PMC&committer。开源技术爱好者,主要关注分布式系统设计、大数据基础平台建设等领域。连续4年基于HBase/HDFS设计和...

中国HBase技术社区
34分钟前
1
0
ES18-JAVA API 批量操作

1.批量查询 Multi Get API public static void multiGet() {// 批量查询MultiGetResponse response = getClient().prepareMultiGet().add("my_person", "my_index", "1")// 查......

贾峰uk
38分钟前
0
0
SpringBoot2.0使用health

1,引入actuator <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency> 2,application.properties ......

暗中观察
45分钟前
0
0
阿里巴巴Java开发规约

###编程规约 命名风格 【强制】代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束 【强制】代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。...

简心
50分钟前
0
0
如何用TypeScript来创建一个简单的Web应用

转载地址 如何用TypeScript来创建一个简单的Web应用 安装TypeScript 获取TypeScript工具的方式: 通过npm(Node.js包管理器) npm install -g typescript 构建你的第一个TypeScript文件 创建...

durban
54分钟前
0
0
分享好友,朋友圈自定义分享链接无效

这个问题是微信6.5.6版本以后,修改了分享规则:分享的连接必须在公众号后台设定的js安全域名内

LM_Mike
今天
0
0
2018年7月23日课程

一、LVS-DR介绍 director分配请求到不同的real server。real server 处理请求后直接回应给用户,这样director负载均衡器仅处理客户机与服务器的一半连接。负载均衡器仅处理一半的连接,避免了...

人在艹木中
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部