理解Javascript_03_javascript全局观


Posted in Javascript onOctober 11, 2010

先来看一张图吧:

 理解Javascript_03_javascript全局观

解释一下:

核心(ECMAScript):定义了脚本语言的所有对象,属性和方法

文档对象模型(DOM):HTML和XML应用程序接口

浏览器对象模型(BOM):对浏览器窗口进行访问操作

现在来具体的讲一个各个成分:

关于ECMAScript

ECMAScript的工作是定义语法和对象,从最基本的数据类型、条件语句、关键字、保留字到异常处理和对象定义都是它的范畴。

在ECMAScript范畴内定义的对象也叫做原生对象。

其实上它就是一套定义了语法规则的接口,然后由不同的浏览器对其进行实现,最后我们输写遵守语法规则的程序,完成应用开发需求。

关于DOM

根据DOM的定义(HTML和XML应用程序接口)可知DOM由两个部分组成,针对于XML的DOM即DOM Core和针对HTML的DOM HTML。

那DOM Core 和DOM HTML有什么区别与联系呢?

DOM Core的核心概念就是节点(Node)。DOM会将文档中不同类型的元素(这里不元素并不特指<div>这种tag,还包括属性,注释,文本之类)都看作为不同的节点。
理解Javascript_03_javascript全局观
节点结构图

上图描述了DOM CORE的结构图,比较专业,来看一个简单的:

<div id="container"> 
<span>hello world</span> 
</div>

来看一下这段代码在标准浏览器里的DOM表现:

理解Javascript_03_javascript全局观


div和span元素被展现成了一个元素节点,对应到节点结构图中的Element元素

"hello world"和div与span之间的间隔,被展现成了文本节点,对应到节点结构图中的CharacterDate元素

DOM CORE在解析文档时,会将所有的元素、属性、文本、注释等等视为一个节点对象(或继承自节点对象的对象,多态、向上转型),根据文本结构依次展现,最后行成了一棵"DOM树"

DOM HTML的核心概念是HTMLElement,DOM HTML会将文档中的元素(这里的元素特指<body>这种tag,不包括注释,属性,文本)都视为HTMLElement。而元素的属性,则为HTMLElement的属性。

再来看一个示例:

从Node接口提供的属性

myElement.attributes["id"].value;很明显myElement.attributes["id"]返回一个对象.value是得到对象的value属性

Element实现的方法返回

myElement.getAttributes("id");很明显此时id现在只是一个属性而已,这只是一个得到属性的操作。

其实上DOM Core和DOM html的外部调用接口相差并不是很大,对于html文档可以用DOM html进行操作,针对xhtml可以用DOM Core。

关于BOM

老规则,先来一张图:
理解Javascript_03_javascript全局观
BOM与浏览器紧密结合,这些对象也被称为是宿主对象,即由环境提供的对象。

这里要强调一个奇怪的对象Global对象,它代表一个全局对象,Javascript是不允许存在独立的函数,变量和常量,如果没有额外的定义,他们都作为Global对象的属性或方法来看待.像parseInt(),isNaN(),isFinite()等等都作为Global对象的方法来看待,像Nan,Infinity等"常量"也是Global对象的属性。像Boolean,String,Number,RegExp等内置的全局对象的构造函数也是Global对象的属性.但是Global对象实际上并不存在,也就是说你用Global.NaN访问NaN将会报错。实际上它是由window来充当这个角色,并且这个过程是在javascript首次加载时进行的。

好了,好了,就到这吧,本来还有一部分,算了,以后另开一节再说吧。

Javascript 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
微信小程序实现日历功能
Nov 27 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
Javascript实现简易天数计算器
May 18 Javascript
理解Javascript_02_理解undefined和null
Oct 11 #Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 #Javascript
javascript getElementsByClassName实现代码
Oct 11 #Javascript
javascript Array.prototype.slice使用说明
Oct 11 #Javascript
javascript 伪数组实现方法
Oct 11 #Javascript
javascript forEach通用循环遍历方法
Oct 11 #Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 #Javascript
You might like
PHP中比较时间大小实例
2014/08/21 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
python负载均衡的简单实现方法
2018/02/04 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python简单基础小程序的实例代码
2019/04/28 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
领导党性分析材料
2014/02/15 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js