# JS(7/10) Day 24 五倍紅寶石(第八屆共筆)(2021/7/29)
## 閉包補充：
有記憶功能的 function，像計數器一樣。
宣告兩個不同變數指向 function a()。
a 就像是物件產生器。
c、d 變數分別指向兩個不同的記憶體，裡面的 x 值不會互相干擾。
x 稱作環境變數(free variable)，包在內層的 function 會得到 x 這個包包，
可以讓內層的 function 帶著走。

---

## DOM操作：(走前端一定要會)
DOM 是用來把 HTML 文件的標籤變成物件，且存取後拿來使用。
只要是 DOM 文件的物件都會有 querySelector 或是 addEventListener 等函式可使用。

### DOM Tree:
類似生物分類表，用來分類標籤，html在最上層，下層有 head、body，依階層慢慢分下去。

### 選取**單一**元素:(把標籤抓出來當物件用)
只會抓一個，若遇到重複的會選到寫在前面的那個。
- .querySelector("#x"):新方法，跟 CSS 選取器一樣，可以抓 id、class或標籤，也可用階層。
- .getElementById("x"):舊方法，只能抓 id，前面不加 #。

### 選取一群元素:
可以抓全部。
- .querySelectorAll:新方法，可以抓 id、class或標籤，回傳 Nodelist，類似陣列，但不太相同，可以用 forEach方法。
- .getElementsByClassName("x"):舊方法，可以抓 id 或 class，回傳 HTMLCollection。
- .getElementsByName("x"):新方法，可以抓屬性有 name 的物件，回傳 Nodelist。
- .getElementsByTagName("div"):舊方法，可以抓標籤，回傳 HTMLCollection。

### 屬性：(中文都叫屬性，在不同地方的英文會不一樣)
- attribute:屬性在 HTML 會稱為 attribute，href is attribute of a。
- property:屬性在 JS 會稱為 property，id is property of x。

### data attribute:
可以在 HTML 創建屬性到 JS 使用。
寫法為：data-xyz = "123"，寫在標籤裡屬性的地方。
data-xyz 就是 data attribute 就是標籤的屬性，值是"123"。

在 JS 可以使用 .dataset 抓到有寫data-的屬性。
如果 HTML data-後面的名字有-，JS 會自動把-去掉並將後面的英文改大寫。
ex: data-hello-world 會被轉換成 data-helloWorld。
[Dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)

### 把預設行為停止:
- .preventDefault():
可以把預設行為停止。
ex: 把 a 的切換頁面功能停止。

### 創建原本 HTML 內沒有的東西:
- .createElement():
原本在 HTML 內沒有的標籤，利用此函式可以建立一個標籤出來。
- .createTextNode():
原本在 HTML 內沒有的內文，利用此函式可以建立一個內文出來。
- p.appendChild(h):
追加 h 物件在 p 標籤**裡面**，會加在最後面，h 是 p 的小孩。
若追加多個相同 h 物件進去，還是只會生出一個出來。
用此函式搭配 .createElement() 才能把 .createElement() 的標籤渲染(render)出來，不然單寫 .createElement() ，他只會存在於記憶體，不會顯示出來。
- p.insertBefore(h):
追加 h 物件在 p 標籤前面。

### 更改標籤內文:
.innerText 跟 .textContent 效果一樣，但還是有些差異。
.textContent 是原先標準的方法，.innerText 是 IE 建立的，比較晚才納入標準。

### a 標籤:
在 a 上面加 addEventListener ("click")後會先做點擊之後要做的事，再切換頁面。

href = "#"，# 代表錨點，點下去會回到頁面上方，且網址後面會多一個 #。

<a href = "#hi"></a> 
<p name = "hi"></p>
// 點標籤 a 會跳到 name 屬性也是 hi 的位置。

### Bubbling and Capturing:
[龍哥範例](https://codepen.io/kaochenlong/pen/5694159a27d6d0a20adef89db27315aa?editors=1010)(要開開發者模式看 console 的輸出)

addEventListener 的第三個屬性是用來控制 Bubbling and Capturing，預設為 false = Bubbling。
當監聽器在運作時會按照下面的圖運作，先執行 Capturing 再執行 Bubbling。
當 product、a、b 都有裝監聽器時，
因為 b 被包在 product 裡，所以會先點擊到 product、a 才會點到 b，
但因為預設是 Bubbling，所以前面 Capturing 階段不會執行，到 Bubbling 階段才會執行。
因此 console 會顯示，b、a、hi。(可以想像成俄羅斯娃娃，一層包一層)

但當第三個屬性被改成 true 後，會變成 Capturing ，那層會優先執行，
如果將 product、b 改成 true，那執行順序會如下圖，
console 會顯示，hi、b、a。

使用 .stopPropagation() 可以停止傳播，當他做完現在這件事之後就不會把接力棒傳下去，
不會執行後續的 Bubbling and Capturing。

### target vs currentTarget:
- .target:搭配 click 就是指向目前被點擊的對象。
- .currentTarget:搭配監聽器就是指向目前這個監聽器的 click 事件綁定的對象。
- .className:拿取指定標籤的 class 值，可搭配 .target 使用。
- .childNotes:回傳子層節點的 NodeList。
### Event Delegation（指定/委任）:
把事件寫在上層，讓 JS 判斷。
可以在父層裝監聽器，裡面放 .target 讓他自己判斷是點到哪個按鈕。

### 移除標籤:
- .remove()
- .parentNode.remove():把父層移除

### 補充:
可以練習把常用的東西提出來變成 function(FP)，供以後重複使用。

---

###### tags: `JavaScript`