理解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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
进一步探究Python中的正则表达式
2015/04/28 Python
python中查看变量内存地址的方法
2015/05/05 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python画图高斯分布的示例
2019/07/10 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Python celery原理及运行流程解析
2020/06/13 Python
python中setuptools的作用是什么
2020/06/19 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
Linux中如何用命令创建目录
2016/12/02 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
物业保安岗位职责
2014/07/02 职场文书
咖啡店创业计划书
2014/08/15 职场文书
2014年护士长工作总结
2014/11/11 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
埃及王子观后感
2015/06/16 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript