經過昨天的範例分析應該也能較為熟悉JavaScript抓取網頁元素並提供修改，同時也會應用迴圈的部分。今天要來說明JavaScript比較常抓取的網頁元素有哪些。

建置HTML網頁內容

首先先拿前幾天的範例進行調整，製造了一些id和class等網頁內容，可參考以下html：

<div>勇者名稱:<span id="Name">我叫什麼名字？</span></div>
<div id="button">點我抓取ID</div><br>
<div id="cbutton">點我抓取Class</div><br>
<div class="button1">class</div>
<div class="button1">class</div>
<div id="show"></div>

抓取ID getElementById

首先先製作一個變項，透過document.querySelector篩選ID為button的元素。

const changeButton = document.querySelector('#button');
changeButton.addEventListener('click', selected);

function selected(){
var element = document.getElementById("button");
element.style.backgroundColor='red';
document.getElementById("button").innerHTML='抓到ID了';
}

先創造一個變數changeButton，讓篩選器選擇。接著再透過addEventListener語法，當事件發生時就執行某件事，這邊如果滑鼠點擊該ID範圍，就會執行selected這個程式。selected這個程式首先定義變數element為button這個ID，然後element的背景樣式會變成紅色，接著會將會修改button這個ID的內文為「抓到ID了」。

點了ID為button的按鈕，該按鈕會變成紅色，同時文字也會被取代為抓到ID了。

抓取ClassgetElementsByClassName

Class可以是複數的元素，因此在抓取上會有次序性的問題，這邊的案例會示範抓取所有的class後一併進行調整，請參考以下JavaScript的語法：

const changeButton1 = document.querySelector('#cbutton');
changeButton1.addEventListener('click', select1);

function select1(){
  var y=document.getElementsByClassName("button1");
  var i;
  for (i = 0; i < y.length; i++) {
    y[i].style.backgroundColor = "green";
    y[i].innerHTML='抓到Class了';
  }
} 

先創造一個變數changeButton1，讓篩選器選擇。接著再透過addEventListener語法，當事件發生時就執行某件事，這邊如果滑鼠點擊該ID範圍，就會執行select1這個程式。

select1這個程式首先定義變數y為button1這個Class，然後定義變數i，製造一個for迴圈，起始條件為i從0開始(class的次序是從0開始計算)，判斷條件為i小於y的長度，爾後逐一增加。每次迴圈會讓1個名叫button1的class變成綠色，同時會改變該class的文字內容為「抓到Class了」。

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

圖片來源與DOM參考說明：https://ithelp.ithome.com.tw/articles/10202689

DOM簡單的說就是整個網頁的架構組成，細節可參考上述資料來源。例如一開始在介紹HTML時，網頁有head、body、footer等元素，而其中又有更多的分支(文字、圖片等)。而每次編輯網頁增加div或清單時，也會增加該網頁DOM的內容。因為眾多的要素組合，網頁的元素會越來越豐富且複雜，在網頁中新增的id、class等都會逐步加在DOM之中，可參考上面的樹狀圖。

而JavaScript的其中一項的功能，就是抓取這些DOM的元素，賦予任務和變化。本日所示範的抓取ID和Class不過就是JavaScript功能中的冰山一角。

由於篇幅的關係，明天開始就會淺談前端常用的框架如Vue.js與JQuery等，後續也要不斷精進與熟悉JavaScript的語法與功能喔！

本日的範例可參考此連結：https://codepen.io/hamagawa76/pen/zYjzoZz

是不是很簡單！明天會介紹簡易的Vue.js的範例，我們明天見囉！