# JS BOM

## BOM樹

名稱/說明                                      型態
─────────────────────────────────────────────────────────────────
window: 代表視窗                               Window
│
└───navigator: 代表瀏覽器                      Navigator
│
└───location: 代表網址                         Location
│
└───frames: <iframe>對應元素集合                HTMLIFrameElement
│
└───screen: 代表螢幕                           Screen
│
└───history: 代表瀏覽紀錄                       History
│
└───document: 代表HTML檔                       Document
    │
    └───forms: <form>對應元素集合               HTMLFormElement
    │
    └───links: <a href="">對應元素集合          HTMLAnchorElement
    │
    └───anchors: <a name="">對應元素集合        HTMLAnchorElement
    │
    └───images: <img>對應元素集合               HTMLImageElement
    │
    └───all: 代表全部元素                       HTMLElement
    │
    └───cookie: 代表Cookie                     string

---

## BOM常用API

### **Window**
* **alert(message)** 用以顯示警告對話框

    <script>
        alert('Hello, World!');
    </script>

* **confirm(message)** 用以顯示確認對話框

    <script>
        alert(confirm('Exit?'));
    </script>

* **prompt(message , default)** 用以顯示輸入對話框及預設值

    <script>
        alert(prompt('Are you OK?', 'OK'));
    </script>

* **open(url)** 用以開啟新視窗
* **close()** 用以關閉視窗

---

### **Navigator**
* **userAgent** 用以顯示客戶端環境代表字串

    <script>
        alert(navigator.userAgent);
    </script>

---

### **Location**
* **reload()** 用以重新載入當前頁面

    <script>
        location.reload();    // 網頁會一直載入...
    </script>

* **replace(url)** 用指定網址取代當前頁面(無法回到上一頁)

    <script>
        location.replace('https://www.google.com/');
    </script>

---

### **History**
* **back()** 用以回到上一頁

    <script>
        history.back();
    </script>

* **forward()** 用以移到下一頁

    <script>
        history.forward();
    </script>

* **go()** 用以前往指定頁

    <script>
        history.go(1);    // 等同於forward()
    </script>

###### tags: `frontend` `jsnote` [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)