在第一篇JavaScript视频总结博客中。是对JavaScript做了一个宏观的认识。当中,不知道大家可否还记得。JavaScript的核心部分包含哪些?
JavaScript的核心部分主要包含三个:
1.ECMAScript,假设想很多其它了解它,最好还是看看百度
2.BOM(Browser Object Model)(浏览器对象模型)
3.DOM(Document Object Model )(文本对象模型)
本篇博客主要是对后面两个核心部分做个简单总结,两者看起来相似,事实上有着全然不一样的作用。
一.BOM
浏览器对象模型。提供了非常多对象,用于訪问浏览器的功能。
它缺少规范,每一个浏览器都有各自不同的功能或是想法,但浏览器之间还是少不了一些共同拥有的对象。以下就介绍三个共同拥有的对象:window、location和history。 1.window对象
	

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
	BOM的核心对象是window。它表示浏览器的一个实例。
视频中,主要给我们介绍的就是以上4个使用方法。 另外,window对象还包括非常多属性和方法。了解一些经常使用的也就够了。特别地,window下的属性和方法,能够使用window.属性、window.方法()或者直接属性、方法()的方式调用。如:window.alert()和alert()是一个意思。
2.location对象
location是BOM对象之中的一个,它提供了与当前窗体中载入的文档有关的信息。还提供了一些导航功能。 以下是其经常使用的一些方法和属性的列举:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

	3.history对象
history对象是window对象的属性。它保存着用户上网的记录,从窗体被打开的那一刻算起。

	对BOM有了清晰的认识后,以下我们继续对DOM做一个总结。最后对照对照。它们之间有没有什么联系。

二.DOM
文档对象模型。描绘了一个层次化的节点树。执行开发者加入、移除和改动页面的某一部分。 我们在浏览器中所示一个个HTML页面,实际上它的背后是一个个文档,由头部。标题。身体等结构组成。 在DOM中,我们把各个组成部分都称作“节点”,以下就是一个完整的节点树:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

	而相应着节点树背后的DOM,我们也不陌生了:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

	对DOM有了一个总体上的感知后,我们再看看当中关于节点的细节知识:

	以上的这些知识。也不须要我们去记,在用的过程中我们自然而然就会熟练掌握的。

像之前做的项目中,经经常使用到getElementById()的方法,所以如今看也是感觉特别亲切。

	三.BOM和DOM
通过上面的学习总结,还是不难发现BOM和DOM之间有着区别:
1.BOM缺乏标准,DOM的标准是url=g1kcJNIa-PtLXZCRVHg_cFcRxjAAa3Ew5PZpnFI1BLpfaqOL3e3ww8bz-hFjgfJsSGH3nqLLdvu0NO6A_Zqq2myK3vF1k55EF6JJrG-CJVwo3b44_a403diYfx0ZxFuo" target="_blank">W3C
2.BOM和浏览器关系密切。DOM和HTML或XML文档关系密切。 3.BOM的根本对象是window对象,DOM的根本对象是document对象。
从网上查找了一些相关资料阅读,非常多地方都说它们两个之间事实上没有什么关系,而自己认为它们间的联系还是非常紧密的。 之前也说了,我们所示一个个页面,它的背后事实上都包括着一行行的DOM文档代码,所以说,我认为DOM的根本对象事实上就是BOM的根本对象的子对象,也是其一个属性。 详见下图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

	四.学习感受
最初,自己原本想讲BOM和DOM的知识分开写成两篇博客,由于看视频的时候,也没发现它们两者之间有着不论什么关联。但開始写了,開始自己总结的过程的时候,就发现它们两个之间也是能够建立一定联系的。与其分开总结,不如多一些思考,多一些查找。多一些联系,把它们放在一起学习。

【JavaScript】BOM和DOM的更多相关文章

  1. JavaScript——BOM和DOM

    什么是BOM bom:浏览器对象模型 什么是DOM dom:文档对象模型 BOM操作: 调用windows浏览器窗口 windows对象可以通过点调用子对象 windows.navigator对象,可 ...

  2. JavaScript BOM和DOM

    Browser Object Model BOM是所有JavaScript的核心,所有的功能其实都建立在BOM基础之上.各浏览器提供的BOM的功能存在很大差异,BOM在HTML5中已经有很大一部分被放 ...

  3. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  4. 实现JavaScript的组成----BOM和DOM

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...

  5. Javascript之BOM与DOM讲解

    一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口 浏览器对象模 ...

  6. JavaScript(核心、BOM、DOM)

    http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性( ...

  7. 前端--javaScript之BOM和DOM

    BOM和DOM概述 BOM(Browser Object Model):是指浏览器对象模型,它使js有能力和浏览器进行"对话". DOM(Document Object Model ...

  8. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

  9. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

随机推荐

  1. 了解RxJava以及如何在Android应用中使用它

    如果你在阅读这篇文章,相信你一定很想了解RxJava以及如何在Android应用中使用它.可能你已经见过RxJava的代码了,但仍然有些疑惑,愿你能在这篇文章里找到答案. 当我第一次使用RxJava的 ...

  2. VirtualBox – Error In supR3HardenedWinReSpawn

    Genymotion 模拟器安装好虚拟机后,启动时报错: ————————— VirtualBox – Error In supR3HardenedWinReSpawn ————————— <h ...

  3. 新人补钙系列教程之:AS3 位运算符

    ECMAScript 整数有两种类型,即有符号整数(允许用正数和负数)和无符号整数(只允许用正数).在 ECMAScript 中,所有整数字面量默认都是有符号整数,这意味着什么呢? 有符号整数使用 3 ...

  4. AndroidStudio快捷键大全

    很多近期学习移动开发的朋友都是通过Eclipse集成ADT开发安卓程序.但是谷歌已经推出了自己的亲儿子--Android Studio.可以说比原来的开发工具强大很多,现在各大公司也已经逐渐淘汰了Ec ...

  5. Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

  6. Linux服务器安全登录设置

    在日常运维工作中,对加固服务器的安全设置是一个机器重要的环境.比较推荐的做法是:1)严格限制ssh登陆(参考:Linux系统下的ssh使用(依据个人经验总结)):     修改ssh默认监听端口    ...

  7. Java 循环结构 - for, while 及 do...while

    Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...

  8. Git简明操作

    我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下 ...

  9. search-a-2d-matrix——二维矩阵找数

    题目描述 Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the ...

  10. git merge 和 git rebase 小结(转)

    git merge是用来合并两个分支的. git merge b # 将b分支合并到当前分支 同样 git rebase b,也是把 b分支合并到当前分支 ---------------------- ...