節點操作

1. 節點內的數值做加減運算後，重新渲染節點。

! 注意 節點取出的數值是字串，以 parseInt() 轉成 number

2. Element.matches(selectors) 確認class name

CSS Selector Reference

使用matches方法比contains較有彈性
e.g.: if (event.target.matches(".user-avatar img")
e.g.:找element 符合有btn的 class、data-id 為5而且滑鼠移動到element 上的
element.matches('.btn[data-id="5"]:hover')

• matches可以用css selecter來找id, class等element，
  如果這個element有btn-show-movie這個class就符合
  event.target.matches('.btn-show-movie')
  classList.contains()就如語意上的就直接檢查class中(classList)有沒有btn了，所以就不需要用.來特別說要檢查class了。

確認click的是2種 icon才往下執行。if 判斷click到2種icon都執行動作
<i class="fa fa-plus-circle up"></i>
<i class="fa fa-minus-circle up"></i>

if (event.target.matches('.fa-plus-circle') || (event.target.matches('.fa-minus-circle') ) {
    //do sth
}

if (event.target.matches('.up' || '.down') ) {//do sth }

轉運子 || 不可寫在 .matches裡。只會有 ".up" 能執行動作。

2. Node.contains(string) 確認class name

classList.contains() 比較單純只找一個特定的class。所以不需在要找的class 前面加上「.」
選取多個class name的node <span class="fa fa-thumbs-up"></span>
const plusIcon = target.classList.contains('fa', 'fa-thumbs-up')

DEBUG (下圖) 選取Good Good 大拇哥，但不要選到綠色背景大拇哥

因為 HTML 標籤不一樣，所以再用 tagName 篩選，就選不到綠色背景大拇哥。

3. !!注意先註冊監聽器，再渲染畫面

監聽器裡的函式，在監聽器區塊外另外以函式宣告(Function Declaration)，以函式名稱帶入監聽器參數。更清楚。

ac-model-answer-click-icons

• node.contains(可以是擷取class name的字串)
  
• 分數-1 < 0 時，避免呈現負數的 優化簡化if判斷寫法