# 什麼?! 是傳說中的document.querySelector?! by Kai-Hong Chen --- 通常我們點擊網頁的時候不是都會有互動嗎? 通常都是透過這個方式去操作的 而且也會搭配eventListener去做使用 --- 讓我們先回到家目錄，這樣才能正常在Linux的環境下執行 ```bash= $ cd ~ ``` ---- 我們先touch一個html跟一個js檔，或是你要用VScode新增也都是可以的喔 ```bash= $ mkdir practice $ cd practice $ touch index.html $ touch all.js $ code . ```` ---- [按我下載](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 等等打開的按鈕在右下角  ---- 然後在html裡面按下驚嘆號，他會幫你把html該有的東西都弄好  ---- 接下來把我們的剛剛touch出來的JS載入至html裡面，記得要在body的最後面才載入js，不然等等會出事情  ---- 這樣就可以開始操作html裡面的東東了喔 --- ## 稍微講一下dom在幹嘛 ---- ## 其實dom是包在bom裡面  ----   --- ### [這個是今天的目標](https://leave3310.github.io/hex-js-homework/) ---- 我會講解裡面在幹嘛ㄉ啦，希望今天大家可以做的出來，等等都是在.js裡面撰寫，html的部分只要有標籤跟class就行了 --- 如果要顯示出來要分成3個部分，觸發、編輯、顯示 ---- ### [這個是eventlistener的參數](https://www.fooish.com/javascript/dom/event.html) 但我們今天只會用到click而已，所以可看可不看，在最後面加上event函式就行了  ---- 通常使用querySelector時他只會抓取第一個出現的class或id，所以我自己會把要抓的地方自成一個class  ---- 我這邊用物件去做儲存資料的方式   ----  而unshift則是把新的資料加入至最前頭 而其他還有pop、push、shift ---- 那shift是做什麼的呢? ---- 他是把前頭的資料刪除的 --- 資料都處理好了之後哩，我們就可以顯示在頁面上了喔~ ---- innerHTML 他可以更改值，或是取出值  ---- 在知道這個東西之後哩，我用string先去轉換儲存成html看得懂的形式  ---- 之後在用之前設定的querySelector去更改html，這樣就完成了喔~ --- # 結束~