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