先來公布昨天的答案：
function totalPrice(name,hamburgerNum,friesNum, walletNum){
let hamburgerPrice = 10, friesPrice = 20;
let left = walletNum - [(hamburgerPrice*hamburgerNum)+(friesPrice*friesNum)];
return name+" 買完東西後，剩下 "+left+"元";
};
console.log(totalPrice("A",2,4,200));
console.log(totalPrice("B",0,5,150));
console.log(totalPrice("C",2,1,100));
最後分別會印出 "A 買完東西後，剩下 100元" 、 "B 買完東西後，剩下 50元" 、 "C 買完東西後，剩下 60元" 。你答對了嗎？如果有問題歡迎在下方留言處提問唷！
今天我們要聊聊 HTML DOM 文件物件模型。這個名字乍聽之下很難懂，但就像你的電腦裡，會有 c 槽 d 槽，這些槽下面可能又有各自的資料夾，網頁也是一樣的。
還記得在學習 HTML 語法時， HTML 下面細分成<head> 和<body>，又會在<body>標籤底下放<div>等標籤嗎？其實在 HTML 上面還有個頭頭 Document ，就像我上面畫的架構圖一樣。
我們把 HTML 文件中的各個標籤(文字、圖片)都定義成物件，並用節點 Node 來稱呼。節點共有四個種類：
<div>被我們稱呼為 Element<h1>Hello</h1>的 Hello 是 Text<img src>的 src 則被稱呼為 Attribute上下層節點有如父子，被稱為父子關係，例如 HTML 和 Head 就是父子關係。同一層的節點有如兄弟，例如 Head 和 Body ，所以又叫作兄弟關係。
節點的下面可能會有子節點，例如上圖中的 Body 下有子節點 div 。如果沒有子節點的節點，我們會稱他為 leaf 。
還醒著嗎？也許你會想，我知道這些到底要做什麼... 就像你要找一件放在家裡衣櫃的衣服，需要先進家裡，走到房間，打開衣櫃，才能取得衣服，電腦也是一樣。
就讓我們來實際應用剛剛學到的 HTML DOM 觀念吧！
今天我決定要用 JS 來寫一個動畫效果，當使用者按下網頁的按鈕之後，把本來的文字更改為「按下按鈕囉！」，我要怎麼寫呢？
在這邊介紹大家認識一句新語法 .innerHTML ，這句話可以改掉指定標籤裡面的字串。
還記得我們剛剛講的 HTML DOM 嗎？在讓按鈕更改文字之前，我必須告訴電腦是哪一顆按鈕要更改文字，舉例來說，那顆按鈕放在 document 的 body 下面。那我就可以這樣寫：
function change(){
document.body.innerHTML = "按下按鈕囉！";
}
隨後在適當的地方，讓這個函式執行即可。關於如何在點按鈕後產生相對應的動畫，容我們下次再說。
請注意！因為你告訴電腦那顆按鈕放在 document 的 body 下面，如果 body 底下有 N 顆按鈕，那所有按鈕都會在按下去的時候執行變換文字的函式。那...如果我有在標籤裡設 id 或 class ，可以直接指定要用哪顆按鈕嗎？
我們前面講過四種節點，其中，各種標籤如<div>被我們稱呼成什麼？ 對，就是 Element 。這句 getElementById 或者說 getElementsByClassName ，顧名思義即是用 id 或 class 取得 Element 的意思。
我們可以透過宣告來減少之後要打的程式，讓畫面更容易看。例如我已經在 html 中寫好，要更改的按鈕的 id 名稱是 btnChange，那我可以在 JS 中這樣寫：
let btnChange = document.getElementById("btnChange");
function change(){
btnChange.innerHTML = "按下按鈕囉！";
}
除了更改內文，也可以更改 css 樣式設定，例如：
let btnChange = document.getElementById("btnChange");
function change(){
btnChange.style.color = "red";
btnChange.style.fontWeight = "bold";
btnChange.style.display = "none";
}
這邊同樣運用到 HTML Dom 的概念，要先告訴電腦我要取得的是 style 下面的 color / font-weight / display 等等，才能請他做調整。
需要注意的是， fontweight 在 css 中的寫法是 font-weight ，但到了 js 中必須把中間的 - 拿掉，並把小寫 w 改為大寫 W 。其他類似的狀況也一樣。
getElementsByClassName 在使用上和 getElementById 大致相同，這邊就不贅述。
document.querySelector 跟上面一樣，是可以指定特定的 id 或 class 來更改 css 設定、更改文字，甚至是加入 html 裡本來沒有的 html 標籤等等。注意！若找不到相對應的 class 或 id ，會回傳 null 。
要指定 class 名稱必須寫 .class名稱，而 id 則必須寫 #id名稱，例如：
//當html中的class和id名稱都是header時：
document.querySelector(".header")
document.querySelector("#header")
不管是要更改 css 還是加入標籤等等，都可以用點作為友誼的橋梁，加在括弧後面。
document.querySelector(".header").textContent = "A";
document.querySelector(".header").setAttribute("style","color:red");
document.querySelector(".header").classList.add("active");
document.querySelector(".header").innerHTML = "<h1>我是新增的h1內容</h1>"
有了這幾種工具，能幫助我們連結 html 標籤和 js ，作出很多效果。例如本來不存在在畫面中的文字，點選某個按鍵後出現在畫面中，或是讓選單做出開合效果等等。
JS 學徒特訓班教學影片及練習題 12 關
iThome鐵人賽
看影片追技術