iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 8

08 HTML DOM 、 .innerHTML 、 getElementById 、 getElementsByClassName 與 document.querySelector

前言

先來公布昨天的答案:

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 簡介

今天我們要聊聊 HTML DOM 文件物件模型。這個名字乍聽之下很難懂,但就像你的電腦裡,會有 c 槽 d 槽,這些槽下面可能又有各自的資料夾,網頁也是一樣的。

還記得在學習 HTML 語法時, HTML 下面細分成<head><body>,又會在<body>標籤底下放<div>等標籤嗎?其實在 HTML 上面還有個頭頭 Document ,就像我上面畫的架構圖一樣。

我們把 HTML 文件中的各個標籤(文字、圖片)都定義成物件,並用節點 Node 來稱呼。節點共有四個種類:

  • Document ,也就是 HTML 的開端
  • 各種標籤如<div>被我們稱呼為 Element
  • 被標籤包起來的字,如<h1>Hello</h1>的 Hello 是 Text
  • HTML 屬性,如<img src>的 src 則被稱呼為 Attribute

上下層節點有如父子,被稱為父子關係,例如 HTML 和 Head 就是父子關係。同一層的節點有如兄弟,例如 Head 和 Body ,所以又叫作兄弟關係。

節點的下面可能會有子節點,例如上圖中的 Body 下有子節點 div 。如果沒有子節點的節點,我們會稱他為 leaf 。

還醒著嗎?也許你會想,我知道這些到底要做什麼... 就像你要找一件放在家裡衣櫃的衣服,需要先進家裡,走到房間,打開衣櫃,才能取得衣服,電腦也是一樣。

就讓我們來實際應用剛剛學到的 HTML DOM 觀念吧!

.innerHTML

今天我決定要用 JS 來寫一個動畫效果,當使用者按下網頁的按鈕之後,把本來的文字更改為「按下按鈕囉!」,我要怎麼寫呢?

在這邊介紹大家認識一句新語法 .innerHTML ,這句話可以改掉指定標籤裡面的字串。

還記得我們剛剛講的 HTML DOM 嗎?在讓按鈕更改文字之前,我必須告訴電腦是哪一顆按鈕要更改文字,舉例來說,那顆按鈕放在 document 的 body 下面。那我就可以這樣寫:

function change(){
  document.body.innerHTML = "按下按鈕囉!";
}

隨後在適當的地方,讓這個函式執行即可。關於如何在點按鈕後產生相對應的動畫,容我們下次再說。

請注意!因為你告訴電腦那顆按鈕放在 document 的 body 下面,如果 body 底下有 N 顆按鈕,那所有按鈕都會在按下去的時候執行變換文字的函式。那...如果我有在標籤裡設 id 或 class ,可以直接指定要用哪顆按鈕嗎?

getElementById 與 getElementsByClassName

我們前面講過四種節點,其中,各種標籤如<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

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 還是加入標籤等等,都可以用點作為友誼的橋梁,加在括弧後面。

  • .textContent 可以把原本的內容替換,例如變成 A
document.querySelector(".header").textContent = "A";
  • 使用 .setAttribute 覆蓋之前的css設定,例如讓顏色變成紅色
document.querySelector(".header").setAttribute("style","color:red");
  • .classList 動態在 class 加上東西,例如加上 active 這個字
document.querySelector(".header").classList.add("active");
  • .innerHTML 也可以跟 document.querySelector 一起使用,但代表的意義有些許不同。在這裡使用,能在指定的 class 中新增標籤和其中文字等,例如新增 h1 標籤
document.querySelector(".header").innerHTML = "<h1>我是新增的h1內容</h1>"

有了這幾種工具,能幫助我們連結 html 標籤和 js ,作出很多效果。例如本來不存在在畫面中的文字,點選某個按鍵後出現在畫面中,或是讓選單做出開合效果等等。

學習與參考資料

JS 學徒特訓班教學影片及練習題 12 關


上一篇
07 函式
下一篇
09 事件處理與監聽
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言