DOM&BOM

一.BOM
1.認識BOM

什麼是BOM

瀏覽器對象模型， Brower Object Model。

 

爲何須要BOM

咱們的html，css都是在瀏覽器中進行解析的。

當咱們想要實現一些特殊的效果，但願html和css的樣式可以動態的改變。

js是一門瀏覽器端的腳本語言。

咱們須要讓js和html,css之間架起一個橋樑。就js可以與瀏覽器進行交互。在這種狀況下：BOM就出現了。

 

瀏覽器對象模型使用JS有能力與瀏覽器進行「對話」。

 

 

BOM的組成

只要打開瀏覽器，就能夠看到當前的窗口，它的構成以下：

 

當前窗口，就是window對象，而window對象，又包含了6個子對象：

ü  navigator

ü  frames

ü  location

ü  histroy

ü  docuemnt

ü  screen

 
2.window對象

雙重角色：

在ECMAScript語言中的一個全局對象

js訪問瀏覽器的一個接口。是一個對象，對象提供了一些屬性和方法。

 

經常使用的一些window的方法：alert，confirm，prompt，settimeout，setinterval，cleartimeout，clearinterval，open，close

 

alert

彈出一個警告框，輸出相應信息

window有一個特色：就是在調用window的方法時，能夠把window省略掉。

 

confirm

彈出一個確認框，提醒用戶是否確認當前的操做

若是點擊了肯定，那就進行相關操做。

若是點擊了消失，那就什麼也不作。

 

prompt

彈出一個輸入框，容許用戶輸入內容

 

open

打開一個新窗口

 

具體應用：

執行代碼效果

HTML結構：

JS行爲：

 
3.frames對象

和HTML中的框架有關係（frameset frame iframe）

 

前提：若是頁面沒有frameset frameiframe，那麼frames這個對象就是空的，沒有意義。

 

 

父頁面訪問子頁面，使用frames[‘frame的name值’]或frames[索引]
4.其它對象

location

地址，定位

在編程語言中，表示重定位

和a標籤類比，a標籤裏面有個href屬性，能夠跳轉到相應的頁面

 

在實際開發中，有時候，咱們不須要a標籤，那麼這個時候，location也能完成跳轉功能：

注意：

1，a連接能夠控制是在當前窗口打開，仍是在新窗口打開

2，對於location只能在當前窗口打開

3，location還有一個reload方式，從新加載當前頁面（瞭解）

 

history

表示歷史

在js中，它是用來管理歷史記錄。如圖：

有三個方法：

ü  forward()

ü  back()

ü  go()

 

 

go能夠靈活指定是向前仍是後退

go(1) 等價於 forward()

go(-1) 等價於 back()

 

注意：

在使用history時，必須保證history裏面有歷史紀錄，不然確定就不能使用。相似於瀏覽器前進和後退是一個灰色的狀態，如圖：

 

代碼看課堂代碼。

 

navigator,   screen

ü  navigator，在開發時，基本不用，只是在某些框架中的底層代碼中才有使用

ü  在js中，screen沒有任何做用

ü  不講啦
二.DOM（重點）

需求：以開心網爲例

 

當咱們去點擊立既註冊時，須要去用戶輸入的信息進行一個驗證？

 

要驗證用戶填寫的信息是否正確？

ü  1，第一步，先獲得相應的元素

ü  2，第二步，根據元素獲得元素相應的內容，根據內容的不一樣，咱們又分爲兩種狀況，獲得標籤裏面的內容，或獲得標籤中的屬性。

 

以上須要如何知足？

這個時候，DOM出現了。
1.什麼是DOM

DOM：Document Object Model  文檔對象模型

 

DOM，文檔對象模型，是一組用來描述腳本怎樣與結構化文檔進行交互和訪問的web標準，它定義了一系列對象、方法和屬性，用於訪問、操做和建立文檔中的內容、結構、樣式和行爲。

 

ü  JavaScript是ECMA的產物，只是一門語言而已

ü  DOM 則是W3C的標準，只是提供了一個處理頁面的標準而已

ü  兩者的完美結合，可實現web開發中的任何需求。正所謂 1+1>2

ü  比如演員和劇本的關係

 

DOM的發展歷史：

2.DOM 0

W3C組織成立以前，DOM0就出現了，造成了一個所謂的標準。

 

ü  在W3C定義DOM標準以前，Netscape2支持一個簡單的DOM，它提供了僅僅對於連接/圖像和表單這樣的特殊文檔元素的訪問。

ü  這一遺留的DOM被全部瀏覽器廠商採用，而且已經做爲「0級別」DOM正式歸入到W3C標準中。它全部瀏覽器中有效。

ü  0級DOM其實就是定義的一些Document對象的屬性和方法。

 

 

簡單瞭解：

 

爲何還要了解這個DOM0呢？

DOM確實提供了一些簡單的方式來獲取頁面中的元素，並且的有瀏覽器都支持DOM0.

 
3.DOM1

98年10月，W3C推出了DOM 1.0，做爲推薦標準的第一個版本正式發佈，主要包括兩個子規範：

ü  DOM Core（核心部分），把xml文檔設計爲樹形節點結構，併爲這種結構的運行機制制訂了一套規範化標準。同時定義了建立、編輯、操縱這些文檔結構的屬性和方法。

ü  DOM HTML，針對HTML文檔、標籤集合，以及與個別HTML標籤相關的元素定義了對象、屬性和方法。

 

重點是DOM Core，其中的核心思想：

ü  樹形結構

ü  相關的屬性和方法

 
(1).樹形節點結構

 

對於以下這個文檔：

 

其對形結構，以下：

更進一步瞭解，火狐瀏覽器有一個插件--DOMinpector， 能夠查看DOM的詳細結構

 

在DOM造成的樹形結構中，都有哪些類型的節點？

實際上，在html樹形結構中，每個組成元素的都是節點（node），根據節點的信息不一樣，能夠分紅以下三種常見的節點：

ü  元素節點

ü  屬性節點

ü  文本節點

 

 

完整的節點分類以下：

 

節點類型，測試以下：

 

注意：

屬性節點，不會出現要樹形結構模型中。

 

 

 

 

節點之間的關係：

既然全部的節點（元素節點和文本節點）都在樹模型中，那麼他們之間應該存在某種關係。

咱們能夠利用這個關係快速找到某個元素，而後進行操做。

 

針對以下代碼，咱們看一下，它們之間的關係：

 

關係如圖：

 

咱們能夠經過它們之間的關係，來互相獲取相應的目標元素：

ü  parentNode:父節點

ü  childNodes:獲得的是個數組，咱們能夠經過索引來訪問就能夠

ü  firstChild:第一個孩子節點

ü  lastChild:最後一個孩子節點

ü  nextSibling: 下一個兄弟節點

ü  previousSibling:上一個兄弟節點

 

 

對於以下關係，代碼以下：

 

切記一點：

若是使用了節點之間的關係，有的是要考慮空白節點（換行符）

 

通常是不使用節點關係去獲取元素，緣由有二：

ü  寫起來費勁

ü  還可能會出錯，不一樣的瀏覽器，處理機制不同，ie對節點關係處理很正常

 

注意細節：

ü  1，有一個屬性沒有問題：parentNode

ü  2，針對某些兄弟節點，若是沒有換行，使用nextSibling和prviousSibling也沒有問題

ü  3，對於childNodes,firstChild, lastChild這三個節點關係不推薦使用

 
(2).DOM1 標準方法

在DOM中，可使用節點之間的關係，來獲取某個元素，可是關係關係使用的話，效果不太理想。

 

因此， DOM1，它提供了一些其它的標準方法用來獲取頁面中的元素，有兩個：

ü  getElementById       經過元素的ID屬性，來獲取元素

ü  getElementByTagName   經過標籤的名稱來獲取元素

 

 

基本使用：

 注意細節：

1，在使用這兩個標準方法時，對於代碼的解析是自上到下。

解決辦法：

1，將script代碼放到body最後

2，在headk ,添加onload事件， 以下：

 

2，id屬性是當前頁面中是惟一的。 針對getElementByTagName，無論有多少個標籤，獲得的結果是一個數組。
4.選取文檔元素

選取頁面中的元素有以下幾種方式：

ü  1，直接使用DOM0級方式

ü  2，節點之間的關係

ü  3，標準方法

 

代碼以下：

 

問：還有沒有其它的方式？

答案：有

 

getElementByName

根據name屬性來獲取元素

這個方法是能夠獲取到的，可是有兼容性問題，在ie9中不兼容。

 

getElementByClassName

也不推薦使用，有兼容性問題或不支持

 

h5中也有對應的新的方法，講到h5時再說

 

 
5.DOM2 和 DOM3

DOM2增長了以下功能：

ü  對樣式表的操做

ü  事件綁定

 

DOM3的變化：

ü   驗證功能
6.操做元素

ü  建立  createElement

ü  插入  appendChild，insertBefore

ü  複製  cloneNode

ü  刪除  removeChild

ü  替換  replaceChild

 
(1).建立

document.createElement(標籤的名稱)

     注意：建立元素後，只能確保在當前的文檔中有這麼一個h1元素，可是它並無補放到文檔樹裏。

(2).插入操做

appendChild: 在父元素的最後來追加，追加的元素做爲父元素的最後一個節點

insertBefore: 在父元素的某一個子元素以前插入新的元素

 

appendChild方法使用以下：

 

 

它就至關於將剛纔孤立的h1，放到了樹模型中，具體來講是做爲body的最後一個元素進行放置：

 

 

insertBefore方法使用以下：

(3).刪除

理解刪除的過程：父元素能夠刪除子元素

針對以下結構：

 

咱們須要刪除h2元素，分析以下：

 

使用以下：

 

分析，上述方法咱們能夠獲取父元素div和子元素h2.

它們之間存在父子關係，只須要找到子元素，經過parentNode找到父元素。

(4).複製

cloneNode: clone是克隆的意思

格式：要複製的元素.cloneNode(布爾值)

布爾值取值以下：

ü  false，表示淺拷貝，、、

 

 
(5).替換

 

在父元素中，將一個新的元素替換其子元素

格式：父元素.replaceChild(new,old);

 

基本使用：

在實際開發中，replaceChild使用較少。

 

 

 
(6).實際案例

案例：首頁彈廣告並消失

 

 
7.操做屬性

元素 = 標籤+屬性+內容

 

在DOM樹形結構中，節點主要有三種：

ü  元素節點

ü  屬性節點

ü  文本節點

 

首先，須要注意的是：在咱們的DOM中，屬性節點並無做爲節點出現。在DOM樹中，並無列出屬性節點。

因此，咱們不能經過節點關係去找到屬性節點，此路不通。

 

找其它出路：

屬性節點比較特殊，是依賴於標籤存在的，必須和某個具體的元素掛鉤。

咱們能夠根據這個特色，找到咱們想要的屬性節點。

 

獲取屬性節點，有兩種方式：

ü  直接使用對象.屬性

ü  使用DOM中提供一個方法：getAttribute()

 

使用以下：

 

上述兩種的區別：

1，直接使用屬性，是DOM0級提出的方法，getAttribute()是DOM1級提出的標準方法

2，直接使用屬性，只能獲取HTML中定義的標準屬性，若是是自定義屬性，是不能獲取，可是getAttribute()能夠獲取任何屬性：

 

 

 

在實際開發中，若是是html中的標準屬性，那麼咱們可使用對象.屬性來獲取，也可使用getAttribute()來獲取，可是若是是自定義屬性，只能經過getAttribute()來獲取。

 

還有一個細節：

ü  若是屬性名是關鍵字或保留字，使用屬性獲取時，須要換一個名稱

ü  若是使用getAttribute()，則不會出現這個問題

 

基本上就有兩個須要換名字：

ü  class  ---->   className (比較多)

ü  for   ----->   htmlFor (用的少)

 

設置

也有兩種方式：

ü  直接使用屬性的方式格式： 元素.屬性 = 值

ü  使用標準方法setAttribute, 格式：元素.setAttribute(屬性名，屬性值)

 

刪除

使用DOM中提供的標準方法，removeAttribute

格式：元素.removeAttribute(屬性名)

 

實際開發中，獲取和設置屬性經常使用，刪除屬性不經常使用。

 

注意細節：

1，在DOM樹中，屬性節點並無做爲主要的嘉賓列席，沒法經過父節點的childNode對象的列表中找到屬性節點。

2，使用getAttribute和setAttribue能夠讀寫自定義屬性。

3，使用對象的屬性來獲取屬性時，有些名稱須要特殊對待，class--->className

for--->htmlFor

 

 

小星星評分案例：

 

最終要達到的效果：

 

分析，總共用到了4種圖片：

 

搭建HTML結構以下：

 

顯示效果以下：

 

最終js代碼以下：

 

 
8.操做文本

在DOM樹形結構中，全部元素的內容都是一個文本節點。

 

如何獲取文本節點？

只要能獲取元素節點，就能夠獲取文本節點。

 文本節點和文本節點中的內容不是一個概念，咱們是要獲得文本節點的內容，而後對內容進行操做，這樣纔有意義。獲得文本節點自己是沒有用的，在開發中，咱們真正關心是的節點中的內容。

 如何獲得文本節點的內容？

 

方式一：經過文本節點的nodeValue屬性獲取

這種方式，效率很低，通常不用。

 

方式二：innerHTML, 是IE瀏覽器提出的，直接能夠獲取元素中的內容

 

innerHTML功能比較強大，除了能夠獲得節點的內容之年，它還能夠設置內容：

 

innerHTML也能夠進行設置：

 

createTextNode(瞭解)  ：建立文本節點

 
9.操做表格（瞭解）

針對表格操做，徹底可使用DOM中標準方法來完成。

因爲表格操做涉及到的標籤較多，因此操做相對比較麻煩。

 

W3C， 針對表格操做又提供了一個新的方式，專用於操做表格。

 

案例：建立一個兩行兩列的表格，分別用傳。統的方式和新方式來實現

 

傳統的方式：

 

新的方式：

 

對於表格的操做，在開發中，並無那麼頻繁。瞭解就好。

 
10.DOM總結

D ：

Document，文檔，說白了就是咱們的HTML文檔自己

 

O：

Object, 對象，有具體的操做中，咱們使用了大量的對象，好比docuemnt， element(具體的每個標籤對應的就是一個對象)，利用對象的屬性和方式，完成相應的操做。

 

M：

Model，模型，就是樹模型，當頁面載入完畢以後，就會構建咱們的樹模型，在構建樹模型的時候，將文檔中的元素，轉成告終構中的對象。