在第一篇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. java拦截器与过滤器打印请求url与参数

    HttpServletRequest httpServletRequest = (HttpServletRequest) request; HttpServletResponse httpServle ...

  2. 设计模式之空对象模式(php实现)

    github地址:https://github.com/ZQCard/design_pattern /** * 在空对象模式(Null Object Pattern)中,一个空对象取代 NULL 对象 ...

  3. Apache Beam WordCount编程实战及源代码解读

    概述:Apache Beam WordCount编程实战及源代码解读,并通过intellij IDEA和terminal两种方式调试执行WordCount程序,Apache Beam对大数据的批处理和 ...

  4. MySQL MID()函数用法

    SQL MID() 函数用于得到一个字符串的一部分.这个函数被MySQL支持,但不被MS SQL Server和Oracle支持.在SQL Server, Oracle 数据库中,我们可以使用 SQL ...

  5. osx中Grapher的使用

    Grapher 是一个可创建方程图形的应用程序,因此您能够使结果可视化.您能够输入各种数学函数,以二维和三维图形方式查看它们. 您甚至能够让图形动起来.用图形制作影片文件. 打开osx中的Graphe ...

  6. elasticsearch 基本用法

    最大的特点: 1. 数据库的 database, 就是  index 2. 数据库的 table,  就是 tag 3. 不要使用browser, 使用curl来进行客户端操作.  否则会出现 jav ...

  7. Android学习(十八)Toast的使用

    一.什么是Toast 1.Toast是一种提供给用户简洁提示信息的视图. 2.该视图以浮于应用程序之上的形式呈现给用户, Toast提示界面不获取焦点,在不影响用户使用的情况下,给用户某些提示. 3. ...

  8. PHP中session详解

    SESSION 的数据保存在哪里呢?  当然是在服务器端,但不是保存在内存中,而是保存在文件或数据库中.  默认情况下,PHP.ini 中设置的 SESSION 保存方式是 files(session ...

  9. Shell脚本之:退出循环

    Shell也使用 break 和 continue 来跳出循环. break命令 下面的例子中,脚本进入死循环直至用户输入数字大于5,使用break跳出这个循环. #!/bin/bash while ...

  10. Oracle 隐式游标 存储过程

    --隐式游标 注意变量赋值用(:=) 连接符用(||)而不是加号(+) DECLARE v_pk T_PLAT_KEYWORD.ID%TYPE; --主键 v_amount_message T_PLA ...