DOM與BOM

前戲

到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何互動。

也就是我們還不能製作一些我們經常看到的網頁的一些互動，我們需要繼續學習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.close() - 關閉當前視窗

Window的子物件

瀏覽器物件

通過這個物件可以判定所使用的瀏覽器，包含了瀏覽器的相關資訊。

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字串
navigator.userAgent　　// 客戶端絕大部分資訊
navigator.platform　　　// 瀏覽器執行所在的作業系統

screen物件（瞭解即可）

螢幕物件，不常用。

一些屬性：

screen.availWidth - 可用的螢幕寬度
screen.availHeight - 可用的螢幕高度

history物件（瞭解即可）

window.history 物件包含瀏覽器的歷史。

瀏覽歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體的地址，可以簡單的用來前進或後退一個頁面。

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

location物件

window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

常用屬性和方法：

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新載入頁面

彈出框

可以在 JavaScript 中建立三種訊息框：警告框、確認框、提示框。

警告框

警告框經常用於確保使用者可以得到某些資訊。
當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。

語法:

alert("我捉到你了");

確認框

確認框用於使使用者可以驗證或者接受某些資訊。
當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。
如果使用者點選確認，那麼返回值為true。如果使用者點選取消，那麼返回值為false。

語法:

confirm("你要跑嗎？");

提示框

提示框經常用於提示使用者在進入頁面前輸入某個值。
當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。
如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為null。

語法:

prompt("請在下方輸入","你的答案");

計時相關

通過使用 JavaScript，我們可以在一定時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件。

setTimeout()

語法:

var t=setTimeout("JS語句",毫秒)

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。

setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()"。

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

clearTimeout()

語法:

clearTimeout(setTimeout_variable) //取消setTimeout設定

setlnterval()

setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。

setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。

語法：

setInterval("JS語句",時間間隔)

返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設定的 timeout。

clearInterval() 方法的引數必須是由 setInterval() 返回的 ID 值。

語法:

clearInterval(setinterval返回的ID值)

例子:

// 每隔一段時間就執行一次相應函式
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設定
clearInterval(timer);

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     根據標籤名獲取標籤合集

注意：

涉及到DOM操作的JS程式碼應該放在文件的哪個位置

間接查詢

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

節點操作

建立節點

語法:

createElement("標籤名")

示例:

var divEle = document.createElement("div");

新增節點

語法：

追加一個子節點（作為最後的子節點）

somenode.appendChild(newnode);

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

somenode.insertBefore(newnode,某個節點);

示例:

var imgEle=document.createElement("img"); //在文件下建立標籤元素img
imgEle.setAttribute("src","111.jpg"); //為該標籤新增屬性
var d1Ele=document.getElementById("d1"); //得到ID號為d1的標籤
d1Ele.appendChild(imgEle); //在該標籤下新增子標籤imgEle 只有添加了該標籤才能真正的顯示在文件流上

刪除節點

語法:

獲得要刪除的元素，通過父元素呼叫該方法刪除。

Somenode.removeChild(要刪除的節點)

替換節點

語法:

somenode.replaceChild(newnode,某個節點)

屬性節點

獲取文字節點的值：

var divEle = document.getElementById("d1");
divELe.innerText  //只拿文字
divEle.innerHTML	//標籤、文字都拿

設定文字節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"					//只識別文字
divEle.innerHTML="<p>2</p>"  //可以識別標籤

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還可以直接.屬性名來獲取和設定
imgEle.src
imgEle.src="..."

獲取值操作

語法:

elementNode.value

適用於以下標籤：

.input
.select
.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class操作

.className  獲取所有樣式類名(字串)

.classList.remove(cls)  刪除指定類
.classList.add(cls)  新增類
.classList.contains(cls)  存在返回true，否則返回false
.classList.toggle(cls)  存在就刪除，否則新增

常用事件

onclick        當用戶點選某個物件時呼叫的事件控制代碼。
ondblclick     當用戶雙擊某個物件時呼叫的事件控制代碼。

onfocus        元素獲得焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       域的內容被改變。             應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅影象完成載入。
onmousedown    滑鼠按鈕被按下。
onmousemove    滑鼠被移動。
onmouseout     滑鼠從某元素移開。
onmouseover    滑鼠移到某元素之上。

onselect      在文字框中的文字被選中時發生。
onsubmit      確認按鈕被點選，使用的物件是form。

前戲