瀏覽器是如何將HTML程式碼變成網頁畫面呢? 這邊就必須提到HTML Document Object Model（DOM）。

執行我們寫的網頁時，javascript的引擎會載入程式碼，並根據HTML的標籤結構，把每個標籤轉換成物件形成HTML DOM，接著重新組合構成我們看到的畫面。

重點是我們可以藉由使用HTML DOM，來操作網頁共有的基本功能，例如視窗縮放，URL網址，網頁的名稱等等，也是為了實現和使用者有互動的動態網頁的基礎。

例如

<script>
          //認識內建的window物件(HTML DOM結構的最上層)
          console.log(window);
          //取得視窗的寬度和高度
          console.log(window.innerWidth,window.innerHeight);
          //透過screen物件，取得螢幕尺寸
          console.log(window.screen.width,window.screen.height);
          //取得網址列的內容
          console.log(window.location.href);
          //網頁跳轉
          //window.location.href="";
          
          //認識document物件
          console.log(window.document);
          console.dir(document);
            //取得網頁標題
            console.log(document.title);
            //更改網頁標題
            document.title="新的標題";
            //取得Body標籤
            console.log(document.body);
            //更改網頁主畫面的內容(Body標籤的內文)
            console.log(document.body.innerHTML);
            document.body.innerHTML="HELLO HTML DOM";
 </script>

參考資料

澎澎的課程