理解Javascript_03_javascript全局观

 更新时间:2010年10月11日 23:02:27   作者:  
今天让我们站在语言的高度来看一下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,还包括属性,注释,文本之类)都看作为不同的节点。

节点结构图

上图描述了DOM CORE的结构图,比较专业,来看一个简单的:

复制代码 代码如下:

<div id="container">
<span>hello world</span>
</div>

来看一下这段代码在标准浏览器里的DOM表现:


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

老规则,先来一张图:

BOM与浏览器紧密结合,这些对象也被称为是宿主对象,即由环境提供的对象。

这里要强调一个奇怪的对象Global对象,它代表一个全局对象,Javascript是不允许存在独立的函数,变量和常量,如果没有额外的定义,他们都作为Global对象的属性或方法来看待.像parseInt(),isNaN(),isFinite()等等都作为Global对象的方法来看待,像Nan,Infinity等"常量"也是Global对象的属性。像Boolean,String,Number,RegExp等内置的全局对象的构造函数也是Global对象的属性.但是Global对象实际上并不存在,也就是说你用Global.NaN访问NaN将会报错。实际上它是由window来充当这个角色,并且这个过程是在javascript首次加载时进行的。

好了,好了,就到这吧,本来还有一部分,算了,以后另开一节再说吧。

相关文章

  • JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法

    JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法

    这篇文章主要介绍了JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法,涉及javascript针对时间与日期操作的相关技巧,需要的朋友可以参考下
    2016-08-08
  • 完美解决input[type=number]无法显示非数字字符的问题

    完美解决input[type=number]无法显示非数字字符的问题

    下面小编就为大家带来一篇完美解决input[type=number]无法显示非数字字符的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 详解ES7 Decorator 入门解析

    详解ES7 Decorator 入门解析

    这篇文章主要介绍了详解ES7 Decorator 入门解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JavaScript 手动实现instanceof的方法

    JavaScript 手动实现instanceof的方法

    instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上,本文重点给大家介绍JavaScript手动实现instanceof的问题,感兴趣的朋友跟随小编一起看看吧
    2021-10-10
  • 学习JavaScript编程语言的8张思维导图分享

    学习JavaScript编程语言的8张思维导图分享

    这篇文章主要介绍了学习JavaScript编程语言的8张思维导图分享,本文给出了javascript变量、javascript运算符、javascript数组、javascript流程语句、javascript字符串函数、javascript函数基础、javascript基础DOM操作、javascript正则表达式的思维导图,需要的可以参考下
    2015-03-03
  • 微信小程序授权登录的最新实现方案详解(2023年)

    微信小程序授权登录的最新实现方案详解(2023年)

    最近由于公司需要研究了一下微信小程序的开发,特此记录一下小程序登录授权的流程,便于自己理解,也希望对他人有多帮助,下面这篇文章主要给大家介绍了关于微信小程序授权登录的最新实现方案的相关资料,需要的朋友可以参考下
    2023-02-02
  • 微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)

    微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)

    这篇文章主要介绍了微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript 是什么意思

    JavaScript 是什么意思

    javascript一种由Netscape的LiveScript发展而来的脚本语言,它提高与Java的兼容性。JavaScript采用HTML页作为其接口。很多朋友问js是什么意思?下面小编通过分享本教程给大家解答下,感兴趣的朋友参考下
    2016-09-09
  • 详解Js中的模块化是如何实现的

    详解Js中的模块化是如何实现的

    这篇文章主要介绍了详解Js中的模块化是如何实现的,详细的介绍了模块化的运行,具有一定的参考价值,有兴趣的可以了解下
    2017-10-10
  • thinkphp中常用的系统常量和系统变量

    thinkphp中常用的系统常量和系统变量

    这篇文章主要介绍了thinkphp中常用的系统常量和变量,需要的朋友可以参考下
    2014-03-03

最新评论