前端基礎之BOM和DOM

關於網頁交互：BOM和DOM

javaScript分爲ECMAScript，DOM，BOM 。

BOM（Browser  object  Model）是指瀏覽器對象模型，它使JavaScript有能力與瀏覽器進行對話

DOM （Document  Object  Model） 是指文檔對象模型，經過它，能夠訪問HTML　　文檔的全部元素。

 

Window對象是客戶端JavaScript最高層對象之一，因爲window獨享是其餘大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。列如：

window.document.write()能夠寫成：document.write()

window對象

全部瀏覽器支持window對象。它表示瀏覽器窗口。

若是文檔包含框架（frame或iframe標籤），瀏覽器會爲HTML文檔建立一個window對象，併爲每一個框架建立一個額外的window對象

沒有應用於window對象的公開標準，不過全部瀏覽器都支持該對象，

全部JavaScript全局對象，函數以及變量均自動稱爲window對象成員。

全局變量是window對象的屬性。全局函數是window對象的方法。

HTML DOM的document也是window對象的屬性之一

經常使用window方法：

window.innerHeight-瀏覽器窗口內部高度

window.innerWidth-瀏覽器窗口的內部寬度

window.open()-打開新窗口

 

window的子對象

navigator對象（瞭解）

瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName  //Web瀏覽器全稱
navigator.appVersion  // Web瀏覽器廠商和班恩的詳細字符串
navigator.userAgent  //客戶端絕大部分信息
navigator.platform  //瀏覽器運行所在的操做系統

screen對象（瞭解）

屏幕對象，不經常使用。

屬性：

screen.availWidth-可用的屏幕寬度

screen.availHeight-可用的屏幕高度

hostory 對象（瞭解）

window.history 對象包含瀏覽器的歷史

瀏覽歷史對象，包含用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。

history.forward()  //前進一頁
history.back()  //後退一頁

location對象

window.location  對象用於得到當前頁面的地址（URL），並把瀏覽器重定向到新的頁面。

經常使用屬性和方法:

location.href  獲取URL

location.href= "URL" //  跳轉指定頁面

location.reload()  從新加載頁面

彈出框

能夠在JavaScript中建立三種消息框： 警告框，確認框，提示框。

警告框

警告框常常用戶確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

語法：

alert（「你看到了嗎？」）

確認框

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消才能繼續進行操做。

若是用戶點擊確認，返回值爲true，反之相反。

語法：confirm("你肯定嗎？")

提示框（瞭解便可）

提示框常常用戶提示用戶在進入頁面輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操做。

若是用戶點擊確認，那麼返回值爲輸入的值，若是用戶點擊取消，那麼返回值爲null。

語法：prompt("請在下方輸入"，‘你的答案’)

 

計時相關

經過使用JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行，咱們稱爲計時事件。

setTimeout（）

語法：

var  t  =  setTimeout("Js語句"，毫秒)

setTimeout（）方法會返回某個值，在上面的語句中，值被儲存在名爲t的變量中，加入你但願取消這個setTimeout（），你可使用這個變量名來指定它。

setTimeout（）的第一個參數是含有JavaScript語句的字符串。這個語句可能諸如「alert（‘5 seconds’）」，或者對函數的調用，諸如  alertMsg（）

第二個參數指示從當前起多少毫秒後執行第一個參數（1000毫秒等於一秒）。

clearTimeout（）

語法：

clearTimeout（setTimeout_variable）

舉個例子：

//  在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);},3000)
//  取消setTimeout設置
clearTimeout（timer）

 

setlnterval()

setlnterval()方法可按照指定的週期（以毫秒計） 來調用函數或計算表達式

setlnterval（）方法會不停地調用函數，直到clearlnterval（）被調用或窗口被關閉，由setlnterval（）返回的ID值可用做clearlnterval（）方法的參數。

 

 

DOM

DOM(Document Object Model)是一套對文檔的內容進行抽象和概念化的方法。

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹。

HTML DOM 樹

 

 

 

DOM標準規定HTML文檔的每一個成分都是一個節點（node）：

文檔節點（document對象）：表明整個文檔

元素節點（element對象）：表明一個元素（標籤）

文本節點（text對象）：表明元素（標籤）中的文本

屬性節點（attribute對象）：表明一個屬性，元素（標籤纔有屬性）

註釋是註釋節點（comment對象）

JavaScript 能夠經過DOM建立動態的HTML：

JavaScript可以改變頁面中的全部HTML元素

JavaScript可以改變頁面中的全部HTML屬性

JavaScript可以改變頁面中的全部css樣式

JavaScript可以對頁面中的全部事件做出反應

 

查找標籤

直接查找

document.getElementById   根據ID獲取一個標籤
document.getElementsByClassName  根據class屬性獲取
document.getElementsByTagName  根據標籤名獲取標籤合集

間接查找

parentElement  父節點標籤元素
children  全部子標籤
firstElementChild  第一個字標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling  下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素

 

節點操做

建立節點

語法：

createElement（標籤名）

實例：

var divEle = document.createElement("div")

添加節點

語法：

追加一個子節點（做爲最後的子節點）

somemode.appendChild(newnode);

把增長的節點放到某個節點的前面

somenode.insertBefore(newnode,某個節點)

 

刪除節點：

獲取要刪除的元素，經過父元素調用該方法刪除