[Javascript]:BOM对象详解和BOM与DOM的层次关系
BOM与DOM的结构层次图
BOM对象是什么
- BOM:浏览器对象模型(Brower Object Model),是用于操作浏览器而出现的API,BOM对象则是Javascript对BOM接口的实现。
- BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。通过BOM对象可以访问浏览器功能部件和属性。
- BOM中代表浏览器窗口的window对象是Javascript顶层对象,其他BOM对象均为window对象的子对象。被作为window对象的属性来引用。
- 其他BOM对象都是在window对象中进行操作。
DOM对象是什么
- DOM:文档对象模型(Document Object Model),是W3C定义的一套用于处理HTML和XML文档内容的标准编程接口API。
- javascript实现DOM接口的对象对应的是document对象,JS通过该对象来对HTML/XML文档进行增删改查。
- DOM定义了HTML和XML的逻辑结构,将整个页面划分成由层次节点构成的文档,以树的形式来展现,如上面那张图所示。
- 在BOM和DOM结构层次图中,document对象属于window对象,所以DOM也可以看作是BOM的一部分。
BOM对象大小写的区别
- window对象 :表示浏览器窗口,是JS的顶层对象。
- location对象:浏览器当前的URL信息。
- navigator对象:浏览器本身信息。
- history对象:浏览器的浏览历史记录信息。
- screen对象:浏览器的屏幕信息。
- document对象:代表当前窗口的网页文档。该对象是JS对DOM的具体实现,本篇章不谈论其用法。
window对象
- 是BOM对象的核心,JS的顶层对象,浏览器窗口只要打开一个HTML文档,浏览器就会为我们创建一个window对象。
- window对象是JS中的全局对象,可以在任何地方调用,而且任何对象的使用都会追溯到对window对象的访问,所以在使用window对象的属性和方法时,可以省略window这个前缀。看起来很像with语句块的作用。
- 简写案例:window.alert() ,可以直接用alert(). window.document.write(),可以简写成document.write()
window对象属性值 | 描述 |
---|---|
closed | 返回窗口是否已被关闭。true是已关闭,false是未关闭。 |
defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
history | 对 History 对象的只读引用。请参数 History 对象。 |
location | 用于窗口或框架的当前的URL信息。请参阅 Location 对象。 |
navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
length | 设置或返回窗口中的框架数量。 |
name | 设置或返回窗口的名称。 |
opener | 返回对创建此窗口的窗口引用。即父窗口。 |
status | 设置窗口状态栏的文本。 |
self、window | 返回对当前窗口的引用。等价于 window 属性。它包含了对窗口自身的引用。 |
window对象常用方法 | 描述 |
---|---|
alert() |
显示带有一段消息和一个确认按钮的对话框。 |
open() | 打开一个新浏览器窗口或查找一个已命名的窗口。可以获得该窗口的window对象。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。确定则返回true,取消则false。 |
prompt() | 显示可提示用户输入的对话框。 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。只会执行一次。 |
clearInterval() | 取消由 setInterval() 方法设置的 timeout。 |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
close() | 关闭浏览器窗口。 |
print() | 打印当前窗口的内容。 |
window对象实例
<body><!-- 加载网页文档后,弹出对话框,点击确定后关闭当前网页 --><script>window.onload = function(){alert("点击确定后,网页就关闭了");window.close();}</script>网页文档加载完成~
</body>
<body window.onunload = "closeChild()"> <!-- 页面关闭事件 --><script type="text/javascript">var newWindow; //接收子窗口的window对象// 打开一个新窗口function openHTML(){newWindow = window.open("./时间显示与暂停.html", "_blank","width=100, height=100,toolbar = no");}//当前页面关闭时,先关闭子窗口function closeChild(){//子窗口未关闭if(!newWindow.closed){newWindow.close();}}</script><button οnclick="openHTML()">打开新窗口</button> <!-- 单击事件 -->
</body>
<!-- 点击按钮实现时间的暂停和显示 -->
<body><script>//每隔1s就加载一次显示时间函数var interval = window.setInterval("displayTime()", 999);//页面加载完成就显示时间window.onload = displayTime;//显示时间function displayTime(){var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();var hh = date.getHours();var mm = date.getMinutes();var ss = date.getSeconds();var currentTime = year + "/" + month + "/" + day + "/" + hh + ":" + mm + ":" + ss + "秒";//将当前时间内容赋给指定DOM节点document.getElementById('display-time').innerText = currentTime;}//暂停时间和显示时间function stopTime(){//时间还在持续显示,时间暂停var text = document.getElementById('btn-time').innerText;if(text == '暂停时间'){window.clearInterval(interval); //清除周期函数,时间暂停document.getElementById('btn-time').innerText = "显示时间"; //修改按钮文本内容}else{//这里执行的周期函数的返回值和之前一样。这样才能同时关闭!interval = window.setInterval("displayTime()", 999); document.getElementById('btn-time').innerText = "暂停时间"; //修改按钮文本内容}}</script><button onclick = "stopTime()" id="btn-time">暂停时间</button><p id="display-time"></p>
</body>
location对象
- 可以获取当前页面的URL所有信息,而且还能和a标签一样,用assign()做跳转,reload()用于刷新。比较常用。
location对象属性 | 描述 |
---|---|
设置或返回从井号 (#) 开始的 URL(锚)。 | |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径部分。 |
protocol | 设置或返回当前 URL 的协议。 |
port | 设置或返回当前 URL 的端口号。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
location对象方法 | 描述 |
assign() | 加载新的文档。 |
reload() | 重新加载当前文档。 |
replace() | 用新文档代替当前文档。 |
location对象实例
<!-- 这里要用到服务器才能更好地体现其作用,使用的是JSP --><body><script type="text/javascript">window.onload = function(){document.writeln("锚点:" + location.hash + "<br>");document.writeln("主机名和端口号:" + location.host + "<br>");document.writeln( "主机名:" + location.hostname + "<br>");document.writeln( "完整URL:" + location.href + "<br>");document.writeln( "协议:" + location.protocol + "<br>");document.writeln( "URL路径:" + location.pathname + "<br>");document.writeln( "URL参数:" + location.search + "<br>");}</script><form action="#" method="get">用户:<input type="text" name="username"/><br>密码:<input type="text" name="pwd"/><br><input type="submit" value="提交"/><br></form>
</body>锚点:
主机名和端口号:localhost:8088
主机名:localhost
完整URL:http://localhost:8088/TestOk/index.jsp?username=admin&pwd=123456
协议:http:
URL路径:/TestOk/index.jsp
URL参数:?username=admin&pwd=123456
navigator对象
- 该对象的属性描述当前正在使用的浏览器信息,如下。至于该对象的方法基本不怎么用,所以就不给出了。
navigator对象属性 | 描述 |
---|---|
返回浏览器的代码名。 | |
appMinorVersion | 返回浏览器的次级版本。 |
appName | 返回浏览器的名称。 |
appVersion | 返回浏览器的平台和版本信息。 |
browserLanguage | 返回当前浏览器的语言。 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值。 |
cpuClass | 返回浏览器系统的 CPU 等级。 |
onLine | 返回指明系统是否处于脱机模式。true则没联网,false则是联网。 |
platform | 返回运行浏览器的操作系统平台。 |
systemLanguage | 返回 OS 使用的默认语言。 |
userAgent | 返回由客户机发送服务器的 user-agent 头部的值。 |
userLanguage | 返回 OS 的自然语言设置。 |
//其他属性大同小异,就不过多演示了//在控制台查看console.log("浏览器名称:" + window.navigator.appName);console.log("浏览器版本:" + navigator.appVersion);console.log("服务器发送的头部值:" + navigator.userAgent);
history对象
- 该对象保存了用户上网的历史记录。为了安全考虑,开发人员无法获得用户浏览器的URL。但能通过历史列表来进行前进和后退网页。
- 它提供的back()和forward()就是模拟浏览器本身自带的回退和前进功能。
- 因为该对象很少用到,所以就不给实例了。这些方法都很简单,可以自己写代码来验证。
history对象属性 | 描述 |
---|---|
返回浏览器历史列表中的 URL 数量。 | |
history对象方法 | 描述 |
back() | 加载 history 列表中的前一个 URL。 |
forward() | 加载 history 列表中的下一个 URL。 |
go() | 加载 history 列表中的某个具体页面。 |
screen对象
- screen对象存放着有关显示浏览器屏幕的信息。可以通过JS拿到这些信息,从而做出一些优化。
- 它的使用方式很简单,使用screen.属性的方式就能获得对应信息。该对象在JS中基本用不到,所以这里就不给出实例了。
screen对象属性 | 描述 |
---|---|
availHeight | 返回显示屏幕的高度 (除 Windows 任务栏之外)。 |
availWidth | 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 |
bufferDepth | 设置或返回调色板的比特深度。 |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度。 |
deviceXDPI | 返回显示屏幕的每英寸水平点数。 |
deviceYDPI | 返回显示屏幕的每英寸垂直点数。 |
fontSmoothingEnabled | 返回用户是否在显示控制面板中启用了字体平滑。 |
height | 返回显示屏幕的高度。 |
logicalXDPI | 返回显示屏幕每英寸的水平方向的常规点数。 |
logicalYDPI | 返回显示屏幕每英寸的垂直方向的常规点数。 |
pixelDepth | 返回显示屏幕的颜色分辨率(比特每像素)。 |
updateInterval | 设置或返回屏幕的刷新率。 |
width | 返回显示器屏幕的宽度。 |
[Javascript]:BOM对象详解和BOM与DOM的层次关系相关推荐
- javascript BOM对象详解
javascript BOM对象详解 目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
- 史上最全JavaScript数组对象详解(二)
JavaScript数组对象详解(二) 上一篇博客我们讲到了JavaScript数组对象的创建,访问和属性,接下来一篇博客主要讲一下JavaScript数组对象的方法及使用.说到数组的方法,主要分为两 ...
- JavaScript Date对象详解 以及 时间戳和时间的相互转换
目录 一.Date对象详解 1.Date对象 2.创建Date对象 3.Date对象属性 4.Date对象方法 5.Date对象的应用(节流函数时间戳写法) 二.时间戳和时间的相互转换 1.时间转换为 ...
- JavaScript进阶(二):BOM对象详解
文章目录 前言 一.Window 对象 1.使用(调用)方式 2.Window 对象的方法 2.1 三个带弹出框的方法 2.2 与打开和关闭有关的方法 2.3 与定时器有关的方法 3.Window 对 ...
- JavaScript Promise对象详解
Promise是JavaScript异步操作解决方案.介绍Promise之前,先对异步操作做一个详细介绍. JavaScript的异步执行 概述 Javascript语言的执行环境是"单线程 ...
- JavaScript window 对象详解
1. 概述 window对象 指当前的浏览器窗口,它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属. 一个变量如果未声明,那么默认就是顶层对象的属性. // a是一个没有声明就直接 ...
- Javascript中的Document对象详解
Document对象详解 document 文挡对象 - JavaScript脚本语言描述 -------------------------------------------- ...
- html内置时间对象,JavaScript中的常用事件,以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解 今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
- JavaScript对象详解
转载请注明预见才能遇见的博客:https://my.csdn.net/ 原文地址:https://blog.csdn.net/weixin_42787326/article/details/81297 ...
最新文章
- VS2010 MFC中改变static字体颜色、大小、背景颜色(自定义类),及手动关联变量的方法...
- 负载均衡续:万亿流量场景下的负载均衡实践
- 阿里老员工论坛炫耀:每年税前260万,还有三千万期权在握
- 可视化经验分享 | 赠书
- 【读书笔记】《高性能JavaScript》
- NFS PersistentVolume - 每天5分钟玩转 Docker 容器技术(151)
- 学习python 正则表达式——与你同行!
- php中统一编码语句,统一编码
- JDBC的批量查询报告内存溢出解决方法
- Upgrading to Java 8——第四章 The Stream API
- 如何用C语言编写小游戏让你的学习不在无聊——三子棋
- 萌萌机器人布娃娃图片_萌萌机器人教程
- 浅谈防勒索病毒方案之主机加固
- ubutnu18.04 华硕天选2060 未发现WIFI适配器(问题尚未解决)
- python用什么软件编程?
- 医疗器械小程序或手机APP软件开发方案
- Qt Qss 渐变颜色设置
- window证书管理
- 国内移动互联网应用开发分析
- PHP 判断两个字符串是否相等