前端生涯

<div class="expand">
content
</div>

一般的類別我們無法輕易看出它是否只用於CSS或JS，亦或是CSS與JS兩者兼具。
不知道的人可能會認為它只用在CSS而去移除、重新命名，為了避免造成不必要的麻煩，
以下有2種解決方法

1. 使用.js-前綴
加了js-前綴表示有使用到js

<div class="js-expand">
content
</div>

如果不想js與style混合使用也可另外加入無前綴的類別版本

<div class="expand js-expand">
content
</div>

2. 加入data attributes
使用querySelector()、querySelectorAll()找出屬性

<div class="expand" data-expand>
content
</div>
var expand = document.querySelectorAll('[data-expand]');

也可以使用[data-target] 或 [data-action]屬性

<div class="expand" data-action="expand">
content
</div>
var expand = document.querySelectorAll('[data-action="expand"]');

querySelector
該方法返回滿足條件的單個元素。按照深度優先和先序遍歷的原則使用參數提供的CSS選擇器在DOM進行查找，返回第一個滿足條件的元素。

querySelectorAll
該方法返回所有滿足條件的元素，結果是個節點列表集合

參考資料: GO MAKE THINGS