理解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入门—访问DOM对象方法
Jan 07 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
网页打开自动最大化的js代码
2012/08/22 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python之os操作方法(详解)
2017/06/15 Python
python实现zabbix发送短信脚本
2018/09/17 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
单位实习证明怎么写
2014/01/17 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
新闻人物通讯稿
2014/10/09 职场文书
评先进个人材料
2014/12/29 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
Python 数据可视化之Matplotlib详解
2021/11/02 Python