欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

理解Javascript_03_javascript全局觀

 更新時(shí)間:2010年10月11日 23:02:27   作者:  
今天讓我們站在語言的高度來看一下Javascript都有點(diǎn)什么。因?yàn)槭侨中缘母╊圆会槍?duì)細(xì)節(jié)作詳細(xì)的講解。

先來看一張圖吧:

 

解釋一下:

核心(ECMAScript):定義了腳本語言的所有對(duì)象,屬性和方法

文檔對(duì)象模型(DOM):HTML和XML應(yīng)用程序接口

瀏覽器對(duì)象模型(BOM):對(duì)瀏覽器窗口進(jìn)行訪問操作

現(xiàn)在來具體的講一個(gè)各個(gè)成分:

關(guān)于ECMAScript

ECMAScript的工作是定義語法和對(duì)象,從最基本的數(shù)據(jù)類型、條件語句、關(guān)鍵字、保留字到異常處理和對(duì)象定義都是它的范疇。

在ECMAScript范疇內(nèi)定義的對(duì)象也叫做原生對(duì)象。

其實(shí)上它就是一套定義了語法規(guī)則的接口,然后由不同的瀏覽器對(duì)其進(jìn)行實(shí)現(xiàn),最后我們輸寫遵守語法規(guī)則的程序,完成應(yīng)用開發(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ì)將文檔中不同類型的元素(這里不元素并不特指<div>這種tag,還包括屬性,注釋,文本之類)都看作為不同的節(jié)點(diǎn)。

節(jié)點(diǎn)結(jié)構(gòu)圖

上圖描述了DOM CORE的結(jié)構(gòu)圖,比較專業(yè),來看一個(gè)簡單的:

復(fù)制代碼 代碼如下:

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

來看一下這段代碼在標(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樹"



DOM HTML的核心概念是HTMLElement,DOM HTML會(huì)將文檔中的元素(這里的元素特指<body>這種tag,不包括注釋,屬性,文本)都視為HTMLElement。而元素的屬性,則為HTMLElement的屬性。

再來看一個(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ī)則,先來一張圖:

BOM與瀏覽器緊密結(jié)合,這些對(duì)象也被稱為是宿主對(duì)象,即由環(huán)境提供的對(duì)象。

這里要強(qiáng)調(diào)一個(gè)奇怪的對(duì)象Global對(duì)象,它代表一個(gè)全局對(duì)象,Javascript是不允許存在獨(dú)立的函數(shù),變量和常量,如果沒有額外的定義,他們都作為Global對(duì)象的屬性或方法來看待.像parseInt(),isNaN(),isFinite()等等都作為Global對(duì)象的方法來看待,像Nan,Infinity等"常量"也是Global對(duì)象的屬性。像Boolean,String,Number,RegExp等內(nèi)置的全局對(duì)象的構(gòu)造函數(shù)也是Global對(duì)象的屬性.但是Global對(duì)象實(shí)際上并不存在,也就是說你用Global.NaN訪問NaN將會(huì)報(bào)錯(cuò)。實(shí)際上它是由window來充當(dāng)這個(gè)角色,并且這個(gè)過程是在javascript首次加載時(shí)進(jìn)行的。

好了,好了,就到這吧,本來還有一部分,算了,以后另開一節(jié)再說吧。

相關(guān)文章

  • 微信小程序使用component自定義toast彈窗效果

    微信小程序使用component自定義toast彈窗效果

    這篇文章主要介紹了微信小程序使用component自定義toast彈窗效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • 基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條

    基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條,可以直接使用的滾動(dòng)條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • 利用百度地圖API獲取當(dāng)前位置信息的實(shí)例

    利用百度地圖API獲取當(dāng)前位置信息的實(shí)例

    下面小編就為大家?guī)硪黄冒俣鹊貓DAPI獲取當(dāng)前位置信息的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,希望對(duì)大家有所幫助
    2017-11-11
  • 微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能

    微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能

    這篇文章主要介紹了微信小程序 scroll-view 實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • js實(shí)現(xiàn)方塊上下左右移動(dòng)效果

    js實(shí)現(xiàn)方塊上下左右移動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)方塊上下左右移動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • 一文詳解DOM的概念和常用操作

    一文詳解DOM的概念和常用操作

    本文詳細(xì)介紹了DOM的概念和常用操作,文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述,并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問,從而改變文檔的結(jié)構(gòu),樣式和內(nèi)容,感興趣的朋友可以參考閱讀本文
    2023-04-04
  • JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法

    JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法

    這篇文章主要介紹了JavaScript定義函數(shù)的三種實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文大家能夠掌握三種定義函數(shù)的方法,需要的朋友可以參考下
    2017-09-09
  • Javascript Symbol原理及使用方法解析

    Javascript Symbol原理及使用方法解析

    這篇文章主要介紹了Javascript Symbol原理及使用方法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-10-10
  • 最新評(píng)論