理解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实现给图片加链接
Aug 15 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
layer弹出层扩展主题的方法
Sep 11 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python基础教程之while循环
2019/08/14 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
降价通知函
2015/04/23 职场文书
通知函格式范文
2015/04/27 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js