Browser - 三大元素 HTML / CSS / JavaScript

目的: 認識 Browser 的三大要素 

處理說明:「HTML、CSS 與 JavaScript 是網頁前端三大要素」:

1. HTML 負責資料與結構
2. CSS 負責樣式與呈現
3. JavaScript 負責行為與互動

原始參考網址 : https://ithelp.ithome.com.tw/articles/10191666

• JavaScript 核心 (以 ECMAScript 標準為基礎)
• BOM (Browser Object Model，瀏覽器物件模型)
• DOM (Document Object Model，文件物件模型)

由於「BOM」與「DOM」是由瀏覽器執行環境所提供。
換句話說，在 node 環境下的 JavaScript 就不會有這兩個部分

1>BOM (Browser Object Model，瀏覽器物件模型)，是瀏覽器所有功能的核心，與網頁的內容無關。

 W3C 把各家瀏覽器都有實作的部分，以及確定已經(或未來會) 加入的功能，統一集合起來納入了 HTML5 的標準中，這也就是我們現在看到的 BOM API 的實作。

1>BOM 的核心是 window 物件。

而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。

window 物件 - 用來與瀏覽器溝通的窗口」

alert("message");

=window.alert(message);

一行程式碼就可以生成一個對話框，很神奇吧？
而這就是瀏覽器環境的 BOM 提供給 JavaScript 控制的功能之一。

類似的對話框還有用來提供「確定/取消」的 window.confirm() window.confirm ，以及開放式問答的 window.prompt() window.prompt 對話框。
當然 BOM 提供的 API 很多，包含開啟/關閉視窗，改變視窗大小，計時器與取得網址等等。 這些在之後的文章當中還會再詳細解說。

2>DOM (Document Object Model，文件物件模型)，是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」

DOM 的 document 其實也是 window 物件的子物件之一。

而「DOM」 與「BOM」最大的區別在於：

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

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

「BOM」完全依賴於瀏覽器廠商實作本身無標準規範，
「DOM」有著 W3C 所制定的標準來規範。

Ex:

<h1 id="greet"></h1>

<script> document.querySelector('#greet').textContent = 'Hello World!' </script>

--> 透過 document.querySelector() 方法來取得節點，

      然後修改 textContent 屬性