BOM即瀏覽器物件模型（brower object model）

DOM即文件物件模型（document object model）

一： BOM

BOM包含windows（視窗）、navigator（瀏覽器）、screen（瀏覽器螢幕）、history（訪問歷史）、location（地址）等

1. windows：頁面一旦載入，就會建立windows物件，無需自行建立。通過該物件可以獲取文字框的寬高（windows.innerWidth）、瀏覽器視窗寬高（windows.outerWidth）、開啟關閉新視窗（windows.open("/")、windows.close()）等屬性

2. Navigator：提供瀏覽器相關資訊，包括瀏覽器名稱、版本號、作業系統等等。

3. screen：提供使用者螢幕相關資訊。如高寬等（screen.width）。

4. history：記錄訪問歷史。返回上次訪問地址：history.back。返回上上次history.back(2)，以此類推。

5. location：瀏覽器中的位址列，可以完成重新整理當前頁面與放回首頁、顯示埠號、伺服器等資訊。

6. alert彈出框、confirm確認框、prompt輸入框：

此時d=trur（是）、false（否）

name=輸入的值

7. 計時器：

<script>
  
function printTime(){
  var d = new Date();
  var h= d.getHours();
  var m= d.getMinutes();
  var s= d.getSeconds();
  document.getElementById("time").innerHTML= h+":"+m+":"+s;
  
}
 
function showTimeIn3Seconds(){
   setTimeout(printTime,3000); 
}
  
</script>
<div id="time"></div>
<button onclick="showTimeIn3Seconds()">點選後3秒鐘後顯示當前時間，並且只顯示一次</button>
 

二：DOM：

DOM就是把html裡的各種資料當做物件處理的一種思路。

1. 通過document.getElementById獲取了id=d1的div標籤對應的元素節點 
然後通過attributes 獲取了該節點對應的屬性節點 
接著通過childNodes獲取了內容節點

2. 獲取節點：

 divs=getElementsByTagName("div")會獲取所有div元素，放在一個數組中，通過迴圈或者divs[]獲取順序元素。

getElementsByClassName("d")會獲取所有class為d的元素，放在陣列中。

getElementsByName("userName")會獲取所有name為username的元素，放在陣列中。

如果通過以上方式獲取不到，原因是因為js是按照順序載入執行的，如果js在上，需要獲取的html元素在下，則不會獲取到該元素，為null值。

 3. 獲取節點的屬性：

div1 = document.getElementById("d1");name=div1.nodeValue為空，因為文件跟元素節點是沒有值的，但是元素的屬性節點是可以取到值的，如：div1.attributes[0].nodeValue就等於d1，div1.childNodes[0].nodeValue就等於div中的值"你好"。

可以通過.innerHTML來獲取和改變元素中的值，div1.innerHTML="我也好"。獲取：name = div1.innerHTML。name的值就是你好。

4. DOM的事件：

                                                                                                     ---以上內容來自how2j.cn/的自學筆記。