理解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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
JavaScript中的面向对象介绍
2012/06/30 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
纯javascript版日历控件
2016/11/24 Javascript
loading动画特效小结
2017/01/22 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue watch关于对象内的属性监听
2019/04/22 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python 下载及安装详细步骤
2019/11/04 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
医院门卫岗位职责
2013/12/30 职场文书
人事助理自荐信
2014/02/02 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
村党组织公开承诺书
2015/04/30 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
golang生成并解析JSON
2022/04/14 Golang