首頁 > web前端 > js教程 > 實作JavaScript的組成(BOM和DOM詳細解讀)

實作JavaScript的組成(BOM和DOM詳細解讀)

亚连
發布: 2018-05-21 13:52:55
原創
1534 人瀏覽過

下面我就為大家帶來一篇實作JavaScript的組成(BOM和DOM詳細解讀)。現在分享給大家,也給大家做個參考。

我們知道,一個完整的JavaScript的實現,需要由三個部分組成:ECMAScript(核心),BOM(瀏覽器物件模型),DOM(文檔物件模型)。

BOM:

BOM提供了很多對象,用來存取瀏覽器的功能,這些功能於網頁內容無關(這些是DOM的事),目前,BOM已經被W3C搬入了HTML5規範中。

window物件:

BOM的core,表示瀏覽器的一個實例,它既是透過javascript存取瀏覽器視窗的一個接口,又是ECMAScript規定的Global對象,這意味著在網頁中定義的任何一個對象,變數和函數,都已window作為其Global對象,因此有權訪問paresinInt()等方法。 (摘自高程三)。此外,如果一個網頁中包含框架,則每個框架都擁有自己的window對象,並且保存在frames集合中(索引0開始,ltr,ttb)。

首先,全域執行環境中的變量,函數都是window物件的屬型和方法。當然,全域變數與直接定義的window屬型有一點差異,全域變數(準確的說應該是明確宣告的全域變數)無法使用delete,而window屬性就可以。此外,還有一個細節要注意,嘗試存取未宣告的變數會出錯,但是使用查詢window物件就沒有問題。

那麼,window有哪些常見的屬性或方法呢?

1.name,每個window物件都有name屬性,包含框架的名稱。通常是為了了解窗口關係與框架。

2.視窗位置方法:moveTo(新位置的x座標,新位置的y座標),moveBy(水平移動x,垂直移動y)。這兩個方法不適用框架。

3.視窗大小屬性:innerWidth/Height(視圖區(減去邊框的寬度)的大小/* IE,Safari,firefox */),outerWidth/Height(傳回瀏覽器視窗的大小/* IE,Safari,firefox */).在Chrome中,inner,outer皆傳回視圖區的大小。

當然,可以透過resizeTo(新視窗width,新視窗height),resizeBy(比原寬度提高x,比原高度提高y)來改變視窗大小。這戀歌方法不適用框架結構。

4.window.open(URL,視窗目標,特性字串,新頁面是否取代瀏覽器歷史記錄中當前載入頁面的boolean)用於導航到一個特定的url或開啟一個新的窗口。如果指定視窗目標,且視窗目標是已有的視窗或框架的名稱,那麼就會在有改名成的視窗或框架中載入指定的url。否則,就將開啟的新視窗命名為目標視窗。當然,視窗目標可以指定的關鍵字有_self,_parent,_top,_blank。

1

2

3

4

5

6

7

8

9

10

11

12

13

<a href=http://www.jb51.net>click me</a>

    <script>

    var link=document.getElementsByTagName("a")[0];

      alert(link.nodeName);  

     window.onload=function(){

       

      link.onclick=function () {

        window.open(link.href,"good","width=400px,height=300px");

        return false;

     

      

    }

  </script

登入後複製

此處特性字串的具體設定不再贅述,有興趣的可以點擊此處

5.作為一門單執行緒語言,js仍然允許設定超時值(指定的事件過後執行程式碼)和間歇時間值(每隔指定的時間循環一次)來調度程式碼在特定的時刻執行。

逾時呼叫:setTimeout(js程式碼字串,毫秒時間),作為一個單執行緒語言,js的任務佇列每次只能執行一段程式碼,若經過設定的時間間隔過後任務佇列為空,則執行程式碼字串,否則,要等到前面的程式碼執行完成後再執行。

1

2

3

4

var al=setTimeout(function () {

      alert("good");

    },5000);

    alert(al); //2

登入後複製

此處,我在5秒後調用了一個匿名函數輸出good,窗口先彈出一個警示框顯示2,可見setTimeout()函數返回的是一個數值ID,具有唯一性,那麼我們就可以透過這個ID來清除超時調用,可以使用clearTimeout(ID)來清除。

間接呼叫:setInterval(),他接受的參數與setTimeout()相同,同樣回傳一個數值ID,使用clearTimeout()清除。

6.系統對話框方法:alert(),confirm(),prompt()等在我前面的部落格中有寫道,點擊這裡

location物件

與其說是BOM中的對象,不如說Location是window對像中的一個屬性,當然,也是後面要講的DOM中document對象的屬性,也就是說,window.location和document. location引用同一個物件。

location物件屬性清單,修改這些屬性可以載入新的頁面,且會在歷史記錄中產生新的紀錄。使用location.replace()則不會再歷史紀錄中產生新紀錄。

navigator物件:用於識別瀏覽器的事實標準,其屬性和方法主要用於偵測瀏覽器的類型。

其餘的如history物件(保存歷史紀錄),screen物件(顯示客戶端能力),由於在js中程式設計作用不大,便不再贅述。

-------------------------------------------- ----------------------------------

DOM:

DOM是基於XML後擴充用於HTML的API,DOM依賴節點樹來展開。 

首先需要明確一點,文檔節點是每個節點的根節點,文檔節點有且只有一個子節點既元素html(文檔元素)。

Node類型:

DOM1中的一個接口,由DOM所有節點類型(文字節點,屬性節點,元素節點)實現,該介面在js中作為Node類型實作。

nodeType屬性,每個節點都擁有。由12個數值表示,element--1,attribute--2,text--3......

nodeName屬性,對於元素節點,nodeName的值為標籤名稱。

nodeValue屬性,對於元素節點,nodeValue的值為null。

節點關係:每個節點都有childNodes屬性,保存NodeList(類別陣列物件)物件。每個節點都有parentNode屬性,指向父節點。在childNodes中的節點擁有相同的parentNode。使用previousSibling和nextSibling屬性可以存取兄弟節點。同時childNodes[0]==firstChild,childNodes[childNodes.length-1]==lastChild.

操作節點:appendChild(),向NodeList末尾push一個節點,傳回新增的節點。 insertBefore(),向NodeList首部unshift一個節點,傳回新增節點。 replaceChild(newChild,targetChild),替換目標節點,原節點仍在文件中,但已經沒有位置。 removeChild(tragetChild),移除節點,與replaceChild()的效果類似。 cloneChild(boolean),true時表示完全複製(整個節點與子節點),false表示基本複製。

Document類型:

表示文檔,document物件是HTMLDDocument(繼承自Document類型)的實例,表示整個html頁面。同時,doument物件也是window物件的屬性,因此可以作為全域物件存取。 document.firstChild==html. document.body==body. document.doctype--->對的引用。 doucment.title--->title  document.url--->location.url.

找出元素:getElementById(),getElementsByTagName(),getElementsByClassName().

#文件寫入:write(),writeln(),open(),close()

Element類型:

getAttribute(),取得特性對於class,則使用“ class”,而不是className,在使用element.className時可以取得class特性。

setAttribute(),設定特性,若特性存在,則替換。否則,創建。

removeAttribute(),徹底刪除元素特性。

createElement(),建立新元素。

Text類型:

createTextNode(),建立文字節點,如果連個文字節點是相鄰同胞節點,則這個兩個文字會連接起來,沒有空格。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

JavaScript的基本規格

#Javascript基本上使用方式

##用p5.js製作煙火特效的範例程式碼_javascript技巧#

hash "#contents" 傳回url中的hash,沒有為「」
host #"www.google.com" #傳回伺服器名稱和連接埠號碼(如果有)
hostname "www.google.com " 傳回不帶連接埠號碼的伺服器名稱
href "www.google.com" 傳回目前頁面的完整url,呼叫了assign()
pathname ''/wileyCDA/' #回傳目錄名稱
##port "8080" #傳回埠號,沒有則回傳空字串
protocol "http:" 返回頁面使用的協定
search "?=javascript" 傳回查詢字串,以問號開頭

以上是實作JavaScript的組成(BOM和DOM詳細解讀)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板