【JavaScript】BOM和DOM

	在第一篇JavaScript视频总结博客中,是对JavaScript做了一个宏观的认识。其中,不知道大家可否还记得,JavaScript的核心部分包括哪些?
	JavaScript的核心部分主要包括三个:
	1.ECMAScript,如果想更多了解它,不妨看看百度。
	2.BOM(Browser Object Model)(浏览器对象模型)
	3.DOM(Document Object Model )(文本对象模型)
	本篇博客主要是对后面两个核心部分做个简单总结,两者看起来相似,其实有着完全不一样的作用。
	一.BOM
	浏览器对象模型,提供了很多对象,用于访问浏览器的功能。
	它缺少规范,每个浏览器都有各自不同的功能或是想法,但浏览器之间还是少不了一些共有的对象。下面就介绍三个共有的对象:window、location和history。
	1.window对象
	
	BOM的核心对象是window,它表示浏览器的一个实例。
	视频中,主要给我们介绍的就是以上4个用法。另外,window对象还包含很多属性和方法,了解一些常用的也就够了。特别地,window下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。如:window.alert()和alert()是一个意思。
	2.location对象
	location是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。下面是其常用的一些方法和属性的列举:

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

	对BOM有了清晰的认识后,下面我们继续对DOM做一个总结,最后对比对比,它们之间有没有什么联系。
	二.DOM
	文档对象模型,描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。
	我们在浏览器中所看到的一个个HTML页面,实际上它的背后是一个个文档,由头部,标题,身体等结构组成。在DOM中,我们把各个组成部分都称作“节点”,下面就是一个完整的节点树:

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

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

	以上的这些知识,也不需要我们去记,在用的过程中我们自然而然就会熟练掌握的。像之前做的项目中,经常用到getElementById()的方法,所以现在看也是感觉特别亲切。
	三.BOM和DOM
	通过上面的学习总结,还是不难发现BOM和DOM之间有着差别:
	1.BOM缺乏标准,DOM的标准是W3C。
	2.BOM和浏览器关系密切,DOM和HTML或XML文档关系密切。
	3.BOM的根本对象是window对象,DOM的根本对象是document对象。
	从网上查找了一些相关资料阅读,很多地方都说它们两个之间其实没有什么关系,而自己觉得它们间的联系还是很紧密的。
	之前也说了,我们所看到的一个个页面,它的背后其实都包含着一行行的DOM文档代码,所以说,我觉得DOM的根本对象其实就是BOM的根本对象的子对象,也是其一个属性。详见下图:

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-03 18:00:26

【JavaScript】BOM和DOM的相关文章

JavaScript BOM和DOM

Browser Object Model BOM是所有JavaScript的核心,所有的功能其实都建立在BOM基础之上.各浏览器提供的BOM的功能存在很大差异,BOM在HTML5中已经有很大一部分被放入了标准. Window对象 window对象代表全局作用域. 如果页面包括frame,则每个frame都有自己的window对象. window.open()可以打开新的窗口(或tab页) location对象 主要管理地址栏中的信息: console.log(window.location ==

[转] JavaScript学习:BOM和DOM的区别和关联

BOM 1.  BOM是Browser Object Model的缩写,即浏览器对象模型. 2.  BOM没有相关标准. 3.  BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切.浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口.打开新选项卡(标签页).关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM. 从2可以看出来:由于没有标准,不同的浏览器实现同一功能,可以需要不同的实现方式.对于上面说的功能,不同的浏览器的实现功能所需要

JavaScript学习总结(三)BOM和DOM详解

转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形结构,DOM树由节点构成 节点种类:元素节点.文本节点和属性节点 DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网

JavaScript(核心、BOM、DOM)

http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性(不可以直接访问本地硬盘) 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关) 1.JavaScript和Java不同! ①所属:NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行,Java需先编译在运行 ④JavaScript是一种弱类型的语言,Java是强类型的语言.

javascript学习大总结(四)BOM和DOM详解

我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1 DOM 是 W3C 的标准: [所有浏览器公共遵守的标准]2 BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现: [表现为不同浏览器定义有差别,实现方式不同]3 window 是 BOM 对象,而非 js 对象: BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM

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

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

JavaScript的组成——ECMAScript、BOM和DOM

JavaScript由三部分组成:ECMAScript.BOM以及DOM 1.核心--ECMAScript:提供核心语言功能 2.文档对象模型--DOM:提供访问和操作网页内容的方法和接口 针对XML但经过扩展用于HTML的应用程序编程接口(API). DOM把页面映射成一个多层节点结构. 为什么使用DOM?Netscape和微软在开发DHTML方面各持己见,为避免两强割据,浏览器互不兼容的局面,保持Web跨平台的天性,DOM应运而生. DOM1级:由DOM Core和DOM HTML两部分组成

前端 JavaScript BOM & DOM

内容目录: 1. BOM 2. DOM BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素. 一.BOM 1.1 windows对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 wind

JavaScript:操作 BOM 和 DOM

JavaScript:操作 BOM 和 DOM 浏览器说明 由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的. 目前主流的浏览器分这么几种: IE 6~11:国内用得最多的IE浏览器,历来对W3C标准支持差.从IE10开始支持ES6标准: Chrome:Google出品的基于Webkit内核浏览器,内置了非常强悍的JavaScript引擎——V8.由于Chrome一经安装就时刻保持自升级,所以不用管它的版本,最新版早就支持ES6了: