理解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实现的分页函数
Dec 22 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
javascript包装对象实例分析
Mar 27 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
layer实现弹出层自动调节位置
Sep 05 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
星际争霸秘籍
2020/03/04 星际争霸
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
高校自主招生自荐信
2013/12/09 职场文书
求职信标题怎么写
2014/05/26 职场文书
社区班子对照检查材料
2014/08/27 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers