理解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 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
jquery 插件学习(三)
Aug 06 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
js简单抽奖代码
Jan 16 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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安全配置
2006/10/09 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
详解a++和++a的区别
2017/08/30 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
详解python 发送邮件实例代码
2016/12/22 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
3分钟演讲稿
2014/04/30 职场文书
商铺门前三包责任书
2014/07/25 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
一般纳税人申请报告
2015/05/18 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
详解mysql三值逻辑与NULL
2021/05/19 MySQL