理解Javascript_03_javascript全局觀
先來(lái)看一張圖吧:

解釋一下:
核心(ECMAScript):定義了腳本語(yǔ)言的所有對(duì)象,屬性和方法
文檔對(duì)象模型(DOM):HTML和XML應(yīng)用程序接口
瀏覽器對(duì)象模型(BOM):對(duì)瀏覽器窗口進(jìn)行訪問(wèn)操作
現(xiàn)在來(lái)具體的講一個(gè)各個(gè)成分:
關(guān)于ECMAScript
ECMAScript的工作是定義語(yǔ)法和對(duì)象,從最基本的數(shù)據(jù)類(lèi)型、條件語(yǔ)句、關(guān)鍵字、保留字到異常處理和對(duì)象定義都是它的范疇。
在ECMAScript范疇內(nèi)定義的對(duì)象也叫做原生對(duì)象。
其實(shí)上它就是一套定義了語(yǔ)法規(guī)則的接口,然后由不同的瀏覽器對(duì)其進(jìn)行實(shí)現(xiàn),最后我們輸寫(xiě)遵守語(yǔ)法規(guī)則的程序,完成應(yīng)用開(kāi)發(fā)需求。
關(guān)于DOM
根據(jù)DOM的定義(HTML和XML應(yīng)用程序接口)可知DOM由兩個(gè)部分組成,針對(duì)于XML的DOM即DOM Core和針對(duì)HTML的DOM HTML。
那DOM Core 和DOM HTML有什么區(qū)別與聯(lián)系呢?
DOM Core的核心概念就是節(jié)點(diǎn)(Node)。DOM會(huì)將文檔中不同類(lèi)型的元素(這里不元素并不特指<div>這種tag,還包括屬性,注釋,文本之類(lèi))都看作為不同的節(jié)點(diǎn)。 
節(jié)點(diǎn)結(jié)構(gòu)圖
上圖描述了DOM CORE的結(jié)構(gòu)圖,比較專業(yè),來(lái)看一個(gè)簡(jiǎn)單的:
<div id="container">
<span>hello world</span>
</div>
來(lái)看一下這段代碼在標(biāo)準(zhǔn)瀏覽器里的DOM表現(xiàn):

div和span元素被展現(xiàn)成了一個(gè)元素節(jié)點(diǎn),對(duì)應(yīng)到節(jié)點(diǎn)結(jié)構(gòu)圖中的Element元素
"hello world"和div與span之間的間隔,被展現(xiàn)成了文本節(jié)點(diǎn),對(duì)應(yīng)到節(jié)點(diǎn)結(jié)構(gòu)圖中的CharacterDate元素
DOM CORE在解析文檔時(shí),會(huì)將所有的元素、屬性、文本、注釋等等視為一個(gè)節(jié)點(diǎn)對(duì)象(或繼承自節(jié)點(diǎn)對(duì)象的對(duì)象,多態(tài)、向上轉(zhuǎn)型),根據(jù)文本結(jié)構(gòu)依次展現(xiàn),最后行成了一棵"DOM樹(shù)"
DOM HTML的核心概念是HTMLElement,DOM HTML會(huì)將文檔中的元素(這里的元素特指<body>這種tag,不包括注釋,屬性,文本)都視為HTMLElement。而元素的屬性,則為HTMLElement的屬性。
再來(lái)看一個(gè)示例:
從Node接口提供的屬性
myElement.attributes["id"].value;很明顯myElement.attributes["id"]返回一個(gè)對(duì)象.value是得到對(duì)象的value屬性
Element實(shí)現(xiàn)的方法返回
myElement.getAttributes("id");很明顯此時(shí)id現(xiàn)在只是一個(gè)屬性而已,這只是一個(gè)得到屬性的操作。
其實(shí)上DOM Core和DOM html的外部調(diào)用接口相差并不是很大,對(duì)于html文檔可以用DOM html進(jìn)行操作,針對(duì)xhtml可以用DOM Core。
關(guān)于BOM
老規(guī)則,先來(lái)一張圖:

BOM與瀏覽器緊密結(jié)合,這些對(duì)象也被稱為是宿主對(duì)象,即由環(huán)境提供的對(duì)象。
這里要強(qiáng)調(diào)一個(gè)奇怪的對(duì)象Global對(duì)象,它代表一個(gè)全局對(duì)象,Javascript是不允許存在獨(dú)立的函數(shù),變量和常量,如果沒(méi)有額外的定義,他們都作為Global對(duì)象的屬性或方法來(lái)看待.像parseInt(),isNaN(),isFinite()等等都作為Global對(duì)象的方法來(lái)看待,像Nan,Infinity等"常量"也是Global對(duì)象的屬性。像Boolean,String,Number,RegExp等內(nèi)置的全局對(duì)象的構(gòu)造函數(shù)也是Global對(duì)象的屬性.但是Global對(duì)象實(shí)際上并不存在,也就是說(shuō)你用Global.NaN訪問(wèn)NaN將會(huì)報(bào)錯(cuò)。實(shí)際上它是由window來(lái)充當(dāng)這個(gè)角色,并且這個(gè)過(guò)程是在javascript首次加載時(shí)進(jìn)行的。
好了,好了,就到這吧,本來(lái)還有一部分,算了,以后另開(kāi)一節(jié)再說(shuō)吧。
- 理解Javascript_15_作用域分配與變量訪問(wèn)規(guī)則,再送個(gè)閉包
- 理解Javascript_14_函數(shù)形式參數(shù)與arguments
- 理解Javascript_13_執(zhí)行模型詳解
- 理解Javascript_12_執(zhí)行模型淺析
- 理解Javascript_11_constructor實(shí)現(xiàn)原理
- 理解Javascript_10_對(duì)象模型
- 理解Javascript_09_Function與Object
- 理解Javascript_08_函數(shù)對(duì)象
- 理解Javascript_07_理解instanceof實(shí)現(xiàn)原理
- 理解Javascript_06_理解對(duì)象的創(chuàng)建過(guò)程
- 理解Javascript_05_原型繼承原理
- 理解Javascript_02_理解undefined和null
- 理解Javascript_01_理解內(nèi)存分配原理分析
相關(guān)文章
JS實(shí)現(xiàn)將Asp.Net的DateTime Json類(lèi)型轉(zhuǎn)換為標(biāo)準(zhǔn)時(shí)間的方法
這篇文章主要介紹了JS實(shí)現(xiàn)將Asp.Net的DateTime Json類(lèi)型轉(zhuǎn)換為標(biāo)準(zhǔn)時(shí)間的方法,涉及javascript針對(duì)時(shí)間與日期操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
完美解決input[type=number]無(wú)法顯示非數(shù)字字符的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決input[type=number]無(wú)法顯示非數(shù)字字符的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript 手動(dòng)實(shí)現(xiàn)instanceof的方法
instanceof運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上,本文重點(diǎn)給大家介紹JavaScript手動(dòng)實(shí)現(xiàn)instanceof的問(wèn)題,感興趣的朋友跟隨小編一起看看吧2021-10-10
學(xué)習(xí)JavaScript編程語(yǔ)言的8張思維導(dǎo)圖分享
這篇文章主要介紹了學(xué)習(xí)JavaScript編程語(yǔ)言的8張思維導(dǎo)圖分享,本文給出了javascript變量、javascript運(yùn)算符、javascript數(shù)組、javascript流程語(yǔ)句、javascript字符串函數(shù)、javascript函數(shù)基礎(chǔ)、javascript基礎(chǔ)DOM操作、javascript正則表達(dá)式的思維導(dǎo)圖,需要的可以參考下2015-03-03
微信小程序授權(quán)登錄的最新實(shí)現(xiàn)方案詳解(2023年)
最近由于公司需要研究了一下微信小程序的開(kāi)發(fā),特此記錄一下小程序登錄授權(quán)的流程,便于自己理解,也希望對(duì)他人有多幫助,下面這篇文章主要給大家介紹了關(guān)于微信小程序授權(quán)登錄的最新實(shí)現(xiàn)方案的相關(guān)資料,需要的朋友可以參考下2023-02-02
微信小程序chooseImage的用法(從本地相冊(cè)選擇圖片或使用相機(jī)拍照)
這篇文章主要介紹了微信小程序chooseImage的用法(從本地相冊(cè)選擇圖片或使用相機(jī)拍照),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
thinkphp中常用的系統(tǒng)常量和系統(tǒng)變量
這篇文章主要介紹了thinkphp中常用的系統(tǒng)常量和變量,需要的朋友可以參考下2014-03-03

