理解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中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
理解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版本实现代码
2012/09/15 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python中int()函数的用法浅析
2017/10/17 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python如何使用腾讯云发送短信
2020/09/17 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
大学生演讲稿范文
2014/01/11 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
报关专员求职信范文
2014/02/22 职场文书
搞笑创意广告语
2014/03/17 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
企业文化标语大全
2014/06/10 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
小学生差生评语
2014/12/29 职场文书
2015年母亲节寄语
2015/03/23 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers