理解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 相关文章推荐
JS字符串处理实例代码
Aug 05 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
javascript几个易错点记录
Nov 26 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
小程序实现上下切换位置
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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
python实用代码片段收集贴
2015/06/03 Python
python操作mysql数据库
2017/03/05 Python
浅谈Python的list中的选取范围
2018/11/12 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python如何实现代码检查
2019/06/28 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
办公室文员工作职责
2014/01/31 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
高中军训的心得体会
2014/09/01 职场文书
公务员年度考核评语
2014/12/31 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
工厂员工辞职信范文
2015/05/12 职场文书