---
# System prepended metadata

title: 瀏覽器裡的 JavaScript
tags: [JavaScript, JS 直播班  - 2021 秋季班]

---

#  瀏覽器裡的 JavaScript
###### tags: `JavaScript` `JS 直播班  - 2021 秋季班`
## <font color=#9B1272>  JavaScript怎麼操作網頁 </font>

JavaScript並沒有提供操作網頁的方法，網頁的操作方法都是由<font color=red>**"瀏覽器"**</font>( JavaScript 操作平台提供的)
網頁的操作方法基本上分別由兩種物件來擁有
1. BOM ( Browser Object Model )
2. DOM ( Document Object model )

所以說 瀏覽器上的JS包含:

* JavaScript 核心 (以 ECMAScript 標準為基礎)

* BOM (Browser Object Model，瀏覽器物件模型)

* DOM (Document Object Model，文件物件模型)

運作原理:
開發者透過JS去呼叫BOM或是DOM提供的API，透過API對瀏覽器做行為上的控制或是更改網頁內容~

## [BOM傳送門!](https://hackmd.io/0pQfQGYzRaauZEwu9AE6UA?edit)
## [DOM傳送門!](https://hackmd.io/IxkeD3N4TbqSoJArAW1jRw)


 ##  <font color=#9B1272> DOM 跟 BOM 的差異 </font>
![](https://i.imgur.com/88Rdiez.png)


其實 DOM 也是 WINDOW 物件下的子物件

<font color="red">**但兩者最大的差異在於:**</font>

**BOM: JavaScript 與「瀏覽器」溝通的窗口，不涉及網頁內容。**

**DOM: JavaScript 用來控制「網頁」的節點與內容的標準。**


# 參考資料
[重新認識 JavaScript: Day 11 前端工程師的主戰場：瀏覽器裡的 JavaScript](https://ithelp.ithome.com.tw/articles/10191666)
[D21 - 走！去瀏覽器吃 好味雙響 BOM DOM 飯](https://ithelp.ithome.com.tw/articles/10278416?sc=iThelpR)
[DAY 2 BOM 、 DOM 是什麼？](https://ithelp.ithome.com.tw/articles/10235079)